文章目錄

• • VS Code
  • • 安裝擴展
    • 全局 setting.json
  • 安裝 ESlint 依賴
  • • 兩種方式：
    • • 方式一：全局安裝
      • 方式二：項目安裝
    • 配置eslint
  • .eslintrc.json

VS Code

安裝擴展

• Vetur
• Vue VSCode Snippets
• Beautify
• ESLint
• Prettier+

全局 setting.json

文件位置：C:\Users\<用戶名>\AppData\Roaming\Code\User\setting.json

{"editor.tabSize": 2,"editor.formatOnSave": true, // 保存文件時自動格式化,主要針對html/css/less/scss等eslint未覆蓋的文件格式"editor.codeActionsOnSave": {"source.fixAll.eslint": true, // 保存文件時按照eslint配置自動處理vue/js/jsx/ts/json文件格式},"editor.detectIndentation": false,"editor.lineHeight": 24,"editor.fontSize": 16,"editor.renderWhitespace": "all","editor.snippetSuggestions": "top","editor.wordWrap": "off","editor.accessibilitySupport": "off","files.eol": "\n","html.format.wrapLineLength": 0,"compile-hero.disable-compile-files-on-did-save-code": true,"javascript.format.enable": true,"vetur.validation.template": true,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_line_length": 0,"wrap_attributes": "auto","end_with_newline": false,"semi": false,"singleQuote": true}},"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.css": "prettier","vetur.format.defaultFormatter.postcss": "prettier","vetur.format.defaultFormatter.scss": "prettier","vetur.format.defaultFormatter.less": "prettier","vetur.format.defaultFormatter.stylus": "stylus-supremacy","vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatter.ts": "vscode-typescript","vetur.format.defaultFormatter.sass": "sass-formatter","prettier.semi": false,"prettier.tabWidth": 2,"prettier.useTabs": false,"prettier.printWidth": 500,"prettier.trailingComma": "es5","prettier.bracketSpacing": true,"prettier.singleQuote": true, //使用單引號替代雙引號"prettier.arrowParens": "avoid","prettier.eslintIntegration": true,"prettier.htmlWhitespaceSensitivity": "ignore","prettier.endOfLine": "lf","[javascript]": {"editor.defaultFormatter": "svipas.prettier-plus"},"[vue]": {"editor.defaultFormatter": "svipas.prettier-plus"},"eslint.alwaysShowStatus": true,"eslint.workingDirectories": [".eslintrc.json",{"mode": "auto"}],"eslint.validate": ["javascript","javascriptreact","vue"], }

安裝 ESlint 依賴

兩種方式：

方式一：全局安裝

npm install -g eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-standard eslint-plugin-vue prettier

方式二：項目安裝

npm install -D eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-standard eslint-plugin-vue prettier ## package.json 中的依賴 "devDependencies": {"babel-eslint": "^10.1.0","eslint": "^7.26.0","eslint-config-prettier": "8.3.0","eslint-config-standard": "^16.0.2","eslint-plugin-import": "^2.22.1","eslint-plugin-node": "^11.1.0","eslint-plugin-prettier": "3.4.0","eslint-plugin-standard": "^5.0.0","eslint-plugin-vue": "^7.9.0","prettier": "1.19.1", }

配置eslint

eslint cmd中選擇
方式一：使用數(shù)字 0 1 2 3…選擇；
方式二：使用方向鍵選擇

# 在項目根目錄初始化，通過選擇選項，會在項目根目錄新增 “.eslintrc.json” $ ./node_modules/.bin/eslint --init√ How would you like to use ESLint? · style √ What type of modules does your project use? · esm √ Which framework does your project use? · vue √ Does your project use TypeScript? · No / Yes √ Where does your code run? · browser √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · airbnb √ What format do you want your config file to be in? · JSON Checking peerDependencies of eslint-config-airbnb-base@latest The config that you've selected requires the following dependencies:eslint-plugin-vue@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 √ Would you like to install them now with npm? · No / Yes# eslint檢驗 $ ./node_modules/.bin/eslint --fix

.eslintrc.json

{"root": true,"env": {"node": true,"browser": true,"es6": true},"extends": ["plugin:vue/essential","standard"],"plugins": ["vue"],"rules": {// "off" 或 0 - 關(guān)閉規(guī)則// "warn" 或 1 - 開啟規(guī)則，使用警告級別的錯誤：warn (不會導致程序退出)// "error" 或 2 - 開啟規(guī)則，使用錯誤級別的錯誤：error (當被觸發(fā)的時候，程序會退出)"arrow-parens": 1, // 箭頭函數(shù)括號"arrow-spacing": 1, // 箭頭函數(shù) 的前后括號"arrow-body-style": 1, // 花括號"prefer-arrow-callback": 1, // 要求回調(diào)函數(shù)使用箭頭函數(shù)"prettier/prettier": ["error", { // 要求單引號"singleQuote": true}]// "template-curly-spacing": 0,"import/order": 0, // Enforce a convention in module import order"import/no-extraneous-dependencies": 0, // 禁止導入未在package.json的依賴項，devDependencies，optionalDependencies或peerDependencies中聲明的外部模塊。將使用最接近的父package.json。"import/no-dynamic-require": 0, // CommonJS的require方法用于從不同文件導入模塊。與ES6導入語法不同，可以為其提供將在運行時解析的表達式。雖然這有時是必要且有用的，但在大多數(shù)情況下并非如此。使用表達式（例如，連接路徑和變量）作為參數(shù)使得工具更難以進行靜態(tài)代碼分析，或者在代碼庫中找到使用模塊的位置。"import/extensions": 0, // 某些文件解析算法允許您在導入源路徑中省略文件擴展名。例如，節(jié)點解析器可以將./foo/bar解析為絕對路徑/User/someone/foo/bar.js，因為默認情況下會自動解析.js擴展名。根據(jù)解析程序，您可以配置更多擴展程序以自動解決。"import/no-unresolved": 0, // 確保導入的模塊可以解析為本地文件系統(tǒng)上的模塊，如標準Node require.resolve行為所定義。"import/prefer-default-export": 0, // 當模塊中只有一個導出時，更喜歡使用默認導出而不是命名導出。"vue/no-async-in-computed-properties": 1, // 計算屬性應該是同步的。其中的異步操作可能無法按預期工作，并可能導致意外行為，這就是您應該避免它們的原因。如果您需要異步計算屬性，可能需要考慮使用其他插件[vue-async-computed]"vue/no-side-effects-in-computed-properties": 1, // 在計算屬性中引入副作用被認為是一種非常糟糕的做法。它使代碼無法預測且難以理解。"vue/no-reserved-keys": 1, // 此規(guī)則阻止使用保留名稱以避免沖突和意外行為。"vue/require-v-for-key": 2, // 當v-for寫在自定義組件上時，它需要同時使用v-bind：key。在其他元素上，v-bind：key也最好寫。"vue/require-valid-default-prop": 1, // 此規(guī)則檢查每個prop的默認值是否對給定類型有效。當使用函數(shù)未返回類型Array或Object的默認值時，它應報告錯誤。"vue/html-self-closing": 0,"vue/html-closing-bracket-newline": 0,"vue/attribute-hyphenation": 0,"vue/prop-name-casing": ["error", "camelCase"],"vue/component-definition-name-casing": ["error", "PascalCase"],"vue/max-attributes-per-line": ["error", {"singleline": {"max": 20,"allowFirstLine": true},"multiline": {"max": 20,"allowFirstLine": false}}],"generator-star-spacing": 0, // 強制 generator 函數(shù)中 * 號周圍使用一致的空格"func-names": 0, // 要求或禁止使用命名的 function 表達式"function-paren-newline": ["error", {"minItems": 5}],"radix": 0, // 強制在parseInt()使用基數(shù)參數(shù)"global-require": 1, // 要求 require() 出現(xiàn)在頂層模塊作用域中"vars-on-top": 1, // 要求所有的 var 聲明出現(xiàn)在它們所在的作用域頂部"prefer-destructuring": 1, // 優(yōu)先使用數(shù)組和對象解構(gòu)"guard-for-in": 1, // 要求 for-in 循環(huán)中有一個 if 語句,旨在防止使用for in循環(huán)而不過濾循環(huán)中的結(jié)果時可能出現(xiàn)的意外行為。"consistent-return": 1, // 要求 return 語句要么總是指定返回的值，要么不指定"eqeqeq": 1, // 要求使用 === 和 !=="camelcase": 1, // 強制使用駱駝拼寫法命名約定"block-scoped-var": 1, // 強制把變量的使用限制在其定義的作用域范圍內(nèi),旨在減少綁定上下文之外的變量的使用，并從其他語言模擬傳統(tǒng)的塊范圍。這是為了幫助語言新手避免變量提升的難題。"array-callback-return": 1, // 強制數(shù)組方法的回調(diào)函數(shù)中有 return 語句,Array有幾種過濾，映射和折疊的方法。如果我們忘記return在這些回調(diào)中寫入語句，那可能是一個錯誤。"default-case": 1, // 要求 switch 語句中有 default 分支"prefer-const": 1, // 要求使用 const 聲明那些聲明后不再被修改的變量.如果一個變量從不重新分配，使用const聲明更好。const 聲明告訴讀者，“這個變量永遠不會被重新分配，”減少認知負荷并提高可維護性。"object-shorthand": 1, // 要求或禁止對象字面量中方法和屬性使用簡寫語法"prefer-promise-reject-errors": 1, // 要求使用 Error 對象作為 Promise 拒絕的原因"no-undef": 2, // 禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到. e.g. /* global Stomp SockJS */ in .vue file's <scrpit>"no-extend-native": 2, // 禁止擴展原生類型"no-return-assign": 2, // 禁止在 return 語句中使用賦值語句"no-unused-vars": ["error", {"argsIgnorePattern": "^_"}], // 禁止出現(xiàn)未使用過的變量，可使用前綴 _ 跳過檢查"no-plusplus": 0, // 禁用一元操作符 ++ 和 --"no-console": 0, // no-console"no-control-regex": 0, // 禁止在正則表達式中使用控制字符"no-continue": 0, // 禁用 continue 語句// "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,"no-param-reassign": 1, // 禁止對 function 的參數(shù)進行重新賦值"no-underscore-dangle": 1, // 禁止標識符中有懸空下劃線"_""no-var": 1, // 要求使用 let 或 const 而不是 var"no-useless-concat": 1, // 禁止不必要的字符串字面量或模板字面量的連接"no-shadow": 1, // 禁止變量聲明與外層作用域的變量同名"no-restricted-syntax": 1, // 禁用特定的語法"no-unused-expressions": 1, // 禁止出現(xiàn)未使用過的表達式"no-redeclare": 1, // 禁止多次聲明同一變量"no-loop-func": 1, // 禁止在循環(huán)中出現(xiàn) function 聲明和表達式"no-fallthrough": 1, // 禁止 case 語句落空"no-multi-assign": 1, // 禁止連續(xù)賦值"no-lonely-if": 1, // 禁止 if 作為唯一的語句出現(xiàn)在 else 語句中.如果一個if陳述是該else塊中唯一的陳述，那么使用一個else if表格通常會更清晰。"no-irregular-whitespace": 1, // 禁止在字符串和注釋之外不規(guī)則的空白"no-use-before-define": 1, // 禁止在變量定義之前使用它們"no-useless-escape": 1, // 禁用不必要的轉(zhuǎn)義字符"no-array-constructor": 1, // 禁用 Array 構(gòu)造函數(shù),由于單參數(shù)的缺陷以及Array全局可能被重新定義，所以通常不鼓勵使用構(gòu)造函數(shù)來構(gòu)造新Array數(shù)組，而是傾向于使用數(shù)組文字符號。例外情況是Array構(gòu)造函數(shù)用于通過給構(gòu)造函數(shù)一個數(shù)字參數(shù)有意創(chuàng)建指定大小的稀疏數(shù)組。"no-prototype-builtins": 1, // 禁止直接調(diào)用 Object.prototypes 的內(nèi)置屬性.當假定對象將具有屬性時，這可能導致錯誤Object.prototype。此規(guī)則可防止Object.prototype直接從對象調(diào)用方法。"no-nested-ternary": 1, // 禁用嵌套的三元表達式.嵌套三元表達式會使代碼更難理解。"no-new-wrappers": 1, // 禁止對 String，Number 和 Boolean 使用 new 操作符.沒有任何理由將這些基本包裝用作構(gòu)造函數(shù)"no-labels": 1 // 禁用標簽語句} }

總結(jié)

以上是生活随笔為你收集整理的【VS Code】vue.js ESLint + vscode 代码格式配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。