vue新增eslint程式碼檢測vscode的配置
阿新 • • 發佈:2020-07-16
良好的程式碼習慣,會讓我們進步快,這就要我們有更好的規範和好的程式碼格式。不論我們是入門還是精通,好的程式碼規格和格式,可以讓別人在閱讀你的程式碼的時候,感覺很清新,一目瞭然。如果你想讓你的程式碼更規範,eslint驗證規則就是我們最好的選擇。eslint規範可以讓我們的程式碼更規範,效率更高效.
下面就跟著我一步一步讓我們超神:
1. 首先在vscode安裝eslint外掛和vetur外掛
2. 在檔案的根目錄新增 .eslintrc.js
module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/strongly-recommended', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { // ? javascript rules // 開發模式允許使用console 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 開發環境允許使用除錯 (生產模式禁用) 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 允許使用 async-await 'generator-star-spacing': 'off', // 禁止使用 var 'no-var': 'error', // 函式名括號前不需要有空格 'space-before-function-paren': 'off', // 程式碼塊中避免多餘留白 'padded-blocks': 'off', // 最多出現3個連續空行 'no-multiple-empty-lines': ['error', { 'max': 3, 'maxBOF': 1 }], // 自定義規則 "no-eval": 0, "eqeqeq": 0, "no-unused-vars": [ "error", { "argsIgnorePattern": "commit" } ], // 自定義規則 // ? vue rules // html屬性必須換行 'vue/max-attributes-per-line': 'off', // 沒有內容的元素需要使用閉合標籤 'vue/html-self-closing': 'off' } }
3. 然後設定vscode設定setting.json
ctrl + p
// 搜尋 setting.json
把我的json貼出來,方便大家設定:
{ "extensions.ignoreRecommendations": false, "files.associations": { "*.vue": "vue", "*.wxml": "html", "*.wxss": "css", "*.cjson": "jsonc", "*.wxs": "javascript", "*.js": "javascript", "*.plist": "json" }, "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace", "editor.fontLigatures": true, //連字元 "files.insertFinalNewline": false, //啟用後,儲存檔案時在檔案末尾插入一個最終新行 "git.autofetch": true, "editor.fontSize": 16, //以畫素為單位控制字號 // "editor.fontFamily": "monospace", //控制字體系列 "git.enableSmartCommit": true, //在沒有暫存的更改時提交所有更改 "explorer.confirmDelete": true, //控制資源管理器是否應在刪除檔案到廢紙簍時進行確認 "editor.wordWrap": "on", //控制折行方式 off-禁用折行 on-根據視區寬度折行 //開啟新頁面 welcomePage-開啟預設頁面 none-不開啟 "workbench.startupEditor": "newUntitledFile", //控制在資源管理器內拖放移動檔案或資料夾時是否進行確認 "explorer.confirmDragAndDrop": false, "window.zoomLevel": 0, //調整視窗的縮放級別。原始大小是 0 "git.confirmSync": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // "wrap_attributes": "force-expand-multiline" //強制展開多行 // "wrap_attributes": "force-aligned" "wrap_attributes": "auto" }, "prettyhtml": { "printWidth": 100, "singleQuote": true, "wrapAttributes": false, "sortAttributes": true, }, "prettier": { "semi": false, // 去掉自動分號 } }, "beautify.config": { "brace_style": "collapse,preserve-inline" //解決花括號中換行 }, "vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js程式碼 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html程式碼 "editor.formatOnSave": true, "vetur.format.options.tabSize": 2, "workbench.iconTheme": "vscode-icons", // "vetur.format.options.useTabs": true, //是否在每一行的末尾新增分號 "editor.tabSize": 2, //eslint 2.0 以上配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "tabnine.experimentalAutoImports": true }
如果有用不到的設定直接刪掉就行,這樣就可以完美的使用eslint,是不是很簡單。