工程实战-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规则说明