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
複製代碼