文章目錄

• • 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中選擇
方式一：使用數字 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 - 關閉規則// "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)// "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)"arrow-parens": 1, // 箭頭函數括號"arrow-spacing": 1, // 箭頭函數 的前后括號"arrow-body-style": 1, // 花括號"prefer-arrow-callback": 1, // 要求回調函數使用箭頭函數"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導入語法不同，可以為其提供將在運行時解析的表達式。雖然這有時是必要且有用的，但在大多數情況下并非如此。使用表達式（例如，連接路徑和變量）作為參數使得工具更難以進行靜態代碼分析，或者在代碼庫中找到使用模塊的位置。"import/extensions": 0, // 某些文件解析算法允許您在導入源路徑中省略文件擴展名。例如，節點解析器可以將./foo/bar解析為絕對路徑/User/someone/foo/bar.js，因為默認情況下會自動解析.js擴展名。根據解析程序，您可以配置更多擴展程序以自動解決。"import/no-unresolved": 0, // 確保導入的模塊可以解析為本地文件系統上的模塊，如標準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, // 此規則阻止使用保留名稱以避免沖突和意外行為。"vue/require-v-for-key": 2, // 當v-for寫在自定義組件上時，它需要同時使用v-bind：key。在其他元素上，v-bind：key也最好寫。"vue/require-valid-default-prop": 1, // 此規則檢查每個prop的默認值是否對給定類型有效。當使用函數未返回類型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 函數中 * 號周圍使用一致的空格"func-names": 0, // 要求或禁止使用命名的 function 表達式"function-paren-newline": ["error", {"minItems": 5}],"radix": 0, // 強制在parseInt()使用基數參數"global-require": 1, // 要求 require() 出現在頂層模塊作用域中"vars-on-top": 1, // 要求所有的 var 聲明出現在它們所在的作用域頂部"prefer-destructuring": 1, // 優先使用數組和對象解構"guard-for-in": 1, // 要求 for-in 循環中有一個 if 語句,旨在防止使用for in循環而不過濾循環中的結果時可能出現的意外行為。"consistent-return": 1, // 要求 return 語句要么總是指定返回的值，要么不指定"eqeqeq": 1, // 要求使用 === 和 !=="camelcase": 1, // 強制使用駱駝拼寫法命名約定"block-scoped-var": 1, // 強制把變量的使用限制在其定義的作用域范圍內,旨在減少綁定上下文之外的變量的使用，并從其他語言模擬傳統的塊范圍。這是為了幫助語言新手避免變量提升的難題。"array-callback-return": 1, // 強制數組方法的回調函數中有 return 語句,Array有幾種過濾，映射和折疊的方法。如果我們忘記return在這些回調中寫入語句，那可能是一個錯誤。"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": "^_"}], // 禁止出現未使用過的變量，可使用前綴 _ 跳過檢查"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 的參數進行重新賦值"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, // 禁止出現未使用過的表達式"no-redeclare": 1, // 禁止多次聲明同一變量"no-loop-func": 1, // 禁止在循環中出現 function 聲明和表達式"no-fallthrough": 1, // 禁止 case 語句落空"no-multi-assign": 1, // 禁止連續賦值"no-lonely-if": 1, // 禁止 if 作為唯一的語句出現在 else 語句中.如果一個if陳述是該else塊中唯一的陳述，那么使用一個else if表格通常會更清晰。"no-irregular-whitespace": 1, // 禁止在字符串和注釋之外不規則的空白"no-use-before-define": 1, // 禁止在變量定義之前使用它們"no-useless-escape": 1, // 禁用不必要的轉義字符"no-array-constructor": 1, // 禁用 Array 構造函數,由于單參數的缺陷以及Array全局可能被重新定義，所以通常不鼓勵使用構造函數來構造新Array數組，而是傾向于使用數組文字符號。例外情況是Array構造函數用于通過給構造函數一個數字參數有意創建指定大小的稀疏數組。"no-prototype-builtins": 1, // 禁止直接調用 Object.prototypes 的內置屬性.當假定對象將具有屬性時，這可能導致錯誤Object.prototype。此規則可防止Object.prototype直接從對象調用方法。"no-nested-ternary": 1, // 禁用嵌套的三元表達式.嵌套三元表達式會使代碼更難理解。"no-new-wrappers": 1, // 禁止對 String，Number 和 Boolean 使用 new 操作符.沒有任何理由將這些基本包裝用作構造函數"no-labels": 1 // 禁用標簽語句} }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。