vscode+eslint+vue+html+css+stylelint 全家桶 一步到位

目的：在用vscode编辑vue和html文件时，用eslint验证其中的js代码，让其符合js standard和vue的规则，用stylelint验证其中的样式表。

版本：vscode是最新的1.20，其他也都是最新版的

===安装eslint支持,都安装在项目中===

• cmd进入项目目录

npm init -y
npm i -D eslint 
npm i -D eslint-plugin-vue
npm i -D eslint-plugin-html
npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
npm i -D stylelint 
npm i -D stylelint-config-recommended
复制代码

===vscode安装插件===

• vetur, eslint, IntelliSense for CSS class names, css peek, stylelint

#打开vscode, ctrl+shift+p
#在命令行中输入 eslint c，在当前项目中创建.eslintrc.json文件。
#或者直接在项目根目录下创建这个文件,然后将我的配置文件copy进去就行
#也或者开启optinons选项来引用异地的配置文件
#.eslintrc.json中必须用"html/html-extensions": [".html", ".we"],来限定eslint-plugin-html的作用范围，因为eslint-plugin-html与eslint-plugin-vue有冲突，不限定的话会导致eslint无法识别出js的错误
#同时启用了两个js验证规则：standard, eslint-plugin-vue
复制代码

===.eslintrc.json===

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [ "html" ],
    "settings": {
        "html/html-extensions": [".html", ".we"],
        "html/report-bad-indent": "error"
    },
    "extends": [
        "standard",
        "plugin:vue/recommended"
    ],    
    "rules": {
        "no-const-assign": "warn",
        "no-this-before-super": "warn",
        "no-undef": "warn",
        "no-unreachable": "warn",
        "no-unused-vars": "warn",
        "constructor-super": "warn",
        "valid-typeof": "warn"
    }
}
复制代码

===项目根目录下建立 .stylelintrc.json 文件===

{
  "extends": "stylelint-config-recommended"
}
复制代码

===vscode自定义配置===

{
    "git.ignoreMissingGitWarning": true,
    "workbench.startupEditor": "newUntitledFile",
    "editor.fontSize": 16,
    "javascript.validate.enable": false,
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true
      },
    //不增加关联,eslint-plugin-vue会产生重复提示
    "files.associations": {
        "*.vue": "html"
    },
    "eslint.options": {
        //"configFile": "F:/.eslintrc.json"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "stylelint.additionalDocumentSelectors": [
        "html",
        "vue"
    ]    
}
复制代码

• ok，全家桶一步到位，器已经利了，愉快的code去吧

===删除vscode时要清理的目录===

C:\\Users\\ZR\AppData\\Roaming\\Code
C:\\Users\\ZR\\.vscode
复制代码