脚本宝典收集整理的这篇文章主要介绍了工程实战-vue在vscode的环境配置，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1. vscode基础开发插件

vscode-icons 图标美化
Debugger for Chrome 调试

Beautify 代码格式化
Prettier 代码格式化
ESLint 代码规范
JavaScript (ES6) code snippets javascript语法提示

vetur vue必备
VueHelper vue及相关技术栈语法提示
Sass sass文件高亮&格式化
Stylus language stylus编码支持

Auto Close Tag 自动闭合标签
Auto Rename Tag 自动更改对应标签名
Path Autocomplete 自动补全路径

Git Lens 本地项目git管理
View in Browser 右击在浏览器打开文件
Markdown All in One markdown支持
Npm npm支持
Npm Intellisense npm友好化

2. 配置vscode settings.json

{
    // 基础设置
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "workbench.startupEditor": "welcomePage",
    "editor.quickSuggestions": {
        "strings": true
    },
    
    // vue设置
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.vue": "vue"
    },
    
    // vetur设置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    
    // eslint设置
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    
    // format设置
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.useTabs": true,
    
    // git设置
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    }
}

3. ESLint配置文件

（1）eslint --init 然后选择自己的代码风格（当然，上面的配置与选择项对应修改）
（2）按照cube-ui的代码风格设定（推荐）
工程中.eslintrc.js文件

module.exports = {
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module'
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        'html'
    ],
    // add your custom rules here
    'rules': {
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-tabs': 0,
        'space-before-function-paren': 0
    }
}

点击查看standard类型配置项
点击查看ESLint规则说明

脚本宝典总结

以上是脚本宝典为你收集整理的工程实战-vue在vscode的环境配置全部内容，希望文章能够帮你解决工程实战-vue在vscode的环境配置所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。