VScode-Vue大法

在VScod中完美开发Vue项目,
1.插件安装

"eslint": "^4.10.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"babel-eslint": "^8.0.2",
npm install --save-dev eslint eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard babel-eslint

这是在我项目中用的插件版本,安装 npm install (包名) --save-dev
2.在项目更目录添加.eslintrc.js配置文件
配置文件内容

module.exports = {
    // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    root: true,
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint',
    parserOptions: {
        // 代码是 ECMAScript 模块
        sourceType: 'module'
    },
    env: {
        // 预定义的全局变量，这里是浏览器环境
        browser: true,
    },
    // 扩展一个流行的风格指南，即 eslint-config-standard 
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        // 此插件用来识别.html 和 .vue文件中的js代码
        'html',
        // standard风格的依赖包
        "standard",
        // standard风格的依赖包
        "promise"
    ],
    // 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
    }
}

3.设置VScode

{
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "newUntitledFile",// 以像素为单位控制字号。
    "editor.fontSize": 18,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
    },
    "emmet.includeLanguages": {
        "vue-html" :"html"  
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "workbench.iconTheme": "vscode-icons",
    "vetur.validation.template": true,
    "window.zoomLevel": -1,
    "files.associations": {
        "*.vue": "html"
        },
    "htmlhint.documentSelector": [
        "html",
        "htm",
        "vue"
        ]
}

5.Vue插件安装

1.Vetur
2.Vue 2 Snippets
3.VueHelper

都是精华,接下来就可以愉快的玩耍了
记得在全局安装eslint