demo工程git地址：https://github.com/huangkaizh/vue-eslint-demo
1、安裝node、vue-cli(2.*)等參考官網
2、cmd窗口中運行
vue init webpack eslint-demo
相關選項如下圖所示：
3、vscode安裝prettier、eslint等插件
4、vscode-文件-首選項-設置（點擊右上角圖標打開對象模式）
添加以下配置項：
{
? //根據文件后綴名定義vue文件類型
? "files.associations": {
? ? "*.vue": "vue"
? },
? "eslint.autoFixOnSave": true,
? "eslint.options": {
? ? "extensions": [".js", ".vue"]
? },
? "eslint.validate": [
? ? "javascript",
? ? {
? ? ? "language": "vue",
? ? ? "autoFix": true
? ? },
? ? "html",
? ? "vue"
? ],
? "[less]": {
? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? },
? "[javascript]": {
? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? },
? "[jsonc]": {
? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? },
? "[json]": {
? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? },
? "[html]": {
? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? },
? "[css]": {
? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? }
}
為方便項目中其他成員，可以考慮在項目下新建.vscode文件夾，新建settings.json文件，將上述json復制進去。
5、項目安裝以下依賴
復制以下代碼到package.json中的devDependencies對象中：
? ? "@vue/eslint-config-standard": "^4.0.0",?
? ? "babel-eslint": "^10.0.2",
? ? "eslint": "^6.1.0",
? ? "eslint-config-prettier": "^6.1.0",
? ? "eslint-plugin-vue": "^5.2.3",?
? ? "prettier": "^1.18.2",
npm i
6、eslint的配置文件（.eslintrc.js）做如下修改
{
? "extends": ["prettier"]
}
整個文件如下所示：
module.exports = {
? env: {
? ? node: true
? },
? parserOptions: {
? ? parser: "babel-eslint",
? ? sourceType: "module",
? ? allowImportExportEverywhere: false,
? ? codeFrame: false
? },
? extends: ["@vue/standard", "plugin:vue/strongly-recommended", "prettier"],
? rules: {
? ? quotes: [1, "single", "avoid-escape"], //引號風格
? ? // allow async-await
? ? "generator-star-spacing": "off",
? ? // allow debugger during development
? ? "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
? ? // @fixable 結尾必須有分號
? ? semi: [
? ? ? "error",
? ? ? "always",
? ? ? {
? ? ? ? omitLastInOneLineBlock: true
? ? ? }
? ? ],
? ? // @fixable 一行有多個語句時，分號前面禁止有空格，分號后面必須有空格
? ? "semi-spacing": [
? ? ? "error",
? ? ? {
? ? ? ? before: false,
? ? ? ? after: true
? ? ? }
? ? ],
? ? // @fixable 分號必須寫在行尾，禁止在行首出現
? ? "semi-style": ["error", "last"],
? ? //
? ? //
? ? // 可能的錯誤
? ? //
? ? // 禁止重復的二級鍵名
? ? // @off 沒必要限制
? ? "vue/no-dupe-keys": "off",
? ? // 禁止 <template> 使用 key 屬性
? ? // @off 太嚴格了
? ? "vue/no-template-key": "off",
? ? // prop 的默認值必須匹配它的類型
? ? // @off 太嚴格了
? ? "vue/require-valid-default-prop": "off",
? ? //
? ? //
? ? // 最佳實踐
? ? //
? ? // @fixable html 的結束標簽必須符合規定
? ? // @off 有的標簽不必嚴格符合規定，如 <br> 或 <br/> 都應該是合法的
? ? "vue/html-end-tags": "off",
? ? // 禁止在計算屬性中對屬性修改
? ? // @off 太嚴格了
? ? "vue/no-side-effects-in-computed-properties": "off",
? ? // prop 需要設置默認值
? ? // @off 太嚴格了
? ? "vue/require-default-prop": "off",
? ? // 組件的屬性必須為一定的順序
? ? "vue/order-in-components": "error",
? ? //
? ? //
? ? // 風格問題
? ? //
? ? // @fixable 限制自定義組件的屬性風格
? ? // @off 沒必要限制
? ? "vue/attribute-hyphenation": "off",
? ? // html 屬性值必須用雙引號括起來
? ? "vue/html-quotes": "error",
? ? // @fixable 沒有內容時，組件必須自閉和
? ? // @off 沒必要限制
? ? "vue/html-self-closing": "off",
? ? // 限制每行允許的最多屬性數量
? ? // @off 沒必要限制
? ? "vue/max-attributes-per-line": "off",
? ? // @fixable 限制組件的 name 屬性的值的風格
? ? // @off 沒必要限制
? ? "vue/name-property-casing": "off",
? ? // @fixable 禁止出現連續空格
? ? "vue/no-multi-spaces": "error",
? ? // @fixable 限制 v-bind 的風格
? ? // @off 沒必要限制
? ? "vue/v-bind-style": "off",
? ? // @fixable 限制 v-on 的風格
? ? // @off 沒必要限制
? ? "vue/v-on-style": "off",
? ? // 單行元素的內容之前和之后強制執行換行符
? ? // @off 沒必要限制
? ? "vue/singleline-html-element-content-newline": "off"
? }
};
7、prettier與eslint單引號沖突解決：
工程目錄下新建.prettierrc，文件內容如下：
{
? "singleQuote": true
}
最終效果如下：
