文章目錄

• 1. 安裝依賴
• 2. 配置
• • 2.1 eslint配置
  • 2.2 stylelint配置
  • 2.3 VSCode 配置保存自動修復錯誤

1. 安裝依賴

"babel-eslint": "^10.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0"

2. 配置

2.1 eslint配置

以下主要是考慮到代碼格式化及可自動修復的常用配置，具體配置可查看官網配置：
https://eslint.org/docs/rules/

vue相關的eslint插件：
https://eslint.vuejs.org/rules/

如果eslint配置少可以直接配置在package.json的eslintConfig屬性，如果配置很多最好單獨創建配置文件，如下：

// .eslintrc.js module.exports = {root: true,env: {browser: true,node: true,es6: true,},extends: ["plugin:vue/recommended", "eslint:recommended"],parser: "vue-eslint-parser",parserOptions: {parser: "babel-eslint",},rules: {// 每行最大屬性數量控制"vue/max-attributes-per-line": [2,{singleline: {max: 10,allowFirstLine: true,},multiline: {max: 1,allowFirstLine: false,},},],// 關閉：強制自閉式標簽"vue/html-self-closing": "off",// 關閉：屬性順序"vue/attributes-order": "off",// 關閉：屬性強制執行特定大小寫"vue/name-property-casing": "off","no-console": process.env.NODE_ENV === "production" ? "error" : "off","no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",// 箭頭函數的箭頭前后需要空格"arrow-spacing": ["error",{before: true,after: true,},],// 在打開塊之后和關閉塊之前加空格"block-spacing": ["error", "always"],// 大括號樣式"brace-style": 0, // "brace-style": ["error", "1tbs", { allowSingleLine: true }],// 不要尾隨逗號"comma-dangle": [2, "never"],// 逗號后面加空格"comma-spacing": ["error", { before: false, after: true }],// 在數組元素、對象屬性或變量聲明之后和同一行上需要一個逗號"comma-style": [2, "last"],// 強制縮進indent: ["error", 2, { SwitchCase: 1 }],// 關鍵字前后加空格"keyword-spacing": ["error", { after: true }],// 禁止不必要的括號"no-extra-parens": [2, "all"],// 禁止多個空格"no-multi-spaces": 2,// 禁止多個空行"no-multiple-empty-lines": [2,{max: 1,},],// 禁止尾隨空格"no-trailing-spaces": 2,// 禁止未定義的變量"no-unused-vars": [2, {vars: "all",args: "none"}],// 禁止沒必要的計算屬性"no-useless-computed-key": 2,// 禁止在使用屬性前加空格"no-whitespace-before-property": 2,// 注釋前需要有空格"spaced-comment": ["error", "always"],// 禁止在塊內填充"padded-blocks": ["error", "never"],// 強制分號"semi": ["error", "never"],// 強制分號后使用空格// "semi-spacing": ["error", {"before": false, "after": true}],// 強制塊前空間"space-before-blocks": ["error", "always"],// 強制函數括號前有空格"space-before-function-paren": ["error", "always"],// 強制括號內不要空格"space-in-parens": ["error", "never"],// 強制在運算符周圍有空格"space-infix-ops": "error",// 強制一元單詞運算符有空格"space-unary-ops": ["error",{words: true,nonwords: false,},],// 比較NaN時 需要調用isNaN()"use-isnan": "error",// 大括號內強制保持一致的間距"object-curly-spacing": ["error","always",{objectsInObjects: false,},],// 數組括號間距"array-bracket-spacing": [2, "never"],}, };

.eslintignore 文件：

/public build/*.js node_modules/*

2.2 stylelint配置

官方文檔：https://github.com/stylelint/stylelint/blob/5a8465770b4ec17bb1b47f359d1a17132a204a71/docs/user-guide/rules/list.md

// .stylelintrc.json {"extends": "stylelint-config-standard","rules": {"indentation": 2} }

2.3 VSCode 配置保存自動修復錯誤

打開setting.json配置添加以下配置：

{"editor.tabSize": 2,// "editor.formatOnSave": true,"editor.codeActionsOnSave": {//"source.fixAll": true 這個配置會把vscode安裝的插件自帶的格式化全部應用，建議按下面單個配置"source.fixAll.eslint": true,"source.fixAll.stylelint": true},"eslint.run": "onSave", // 點擊保存自動修復"eslint.codeAction.showDocumentation": {"enable": true},"eslint.validate": ["javascript","typescript","javascriptreact","typescriptreact","html","vue"],"javascript.validate.enable": false } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的VSCode 代码风格统一设置eslint + stylelint的全部內容，希望文章能夠幫你解決所遇到的問題。

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