vscode儲存程式碼,自動按照eslint規範格式化程式碼設定
編輯器程式碼風格一致,是前端程式碼規範的一部分。同一個專案,或者同一個小組,保持程式碼風格一致很必要。
就拿vue專案來說,之前做的幾個專案,很多小夥伴程式碼格式化用的是vue-beautify ,這個格式化工具有個明顯的缺點,就是三元不等式明明可以一行顯示,非得格式化成3行,import用{}引入多個變數或者函式,非得格式化成好幾行,看起來很是彆扭。
因此,好的格式化工具和團隊程式碼風格一致,顯得格外重要。我建議我們整個小組運用同一個編輯器,同一種程式碼校驗,同一個格式化方式。下面我來介紹一下使用vscode+eslint 自動儲存,自動格式化的一種方式!
eslint 自動格式化
先說一個前提吧,你在package.json中安裝了eslint的依賴,不然配置無用。
"eslint": "^6.1.0", "eslint-friendly-formatter": "^6.4.1", "eslint-loader": "^6.4.1", "eslint-plugin-html": "^6.4.1",
上面說的是一個前提,下面來說一下具體的配置步驟:
首先,在我們專案跟目錄新增.eslintrc.js 檔案,用於校驗程式碼,編寫eslint相關規則,關於eslint的一些具體規則,請檢視eslint文件
下面列一下我們專案中常用的eslint規則:
module.exports = { root: true, // 新增外掛 "plugins": ["vue" ], 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }], 'no-undef': 'off','camelcase': 'off', // 允許控制檯輸出 'no-console': 'off', 'accessor-pairs': 2, 'arrow-spacing': [2, { 'before': true, 'after': true }], 'block-spacing': [2, 'always'], 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // 'camelcase': [2, { 'properties': 'always' }], 'comma-dangle': [2, 'never'], 'comma-spacing': [2, { 'before': false, 'after': true }], 'comma-style': [2, 'last'], 'constructor-super': 2, 'curly': [2, 'multi-line'], 'dot-location': [2, 'property'], 'eol-last': 2, 'eqeqeq': [2, 'allow-null'], 'generator-star-spacing': [2, { 'before': true, 'after': true }], 'handle-callback-err': [2, '^(err|error)$' ], 'indent': [2, 2, { 'SwitchCase': 1 }], 'jsx-quotes': [2, 'prefer-single'], 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], 'keyword-spacing': [2, { 'before': true, 'after': true }], 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], 'new-parens': 2, 'no-array-constructor': 2, 'no-caller': 2, 'no-class-assign': 2, 'no-cond-assign': 2, 'no-const-assign': 2, 'no-control-regex': 2, 'no-delete-var': 2, 'no-dupe-args': 2, 'no-dupe-class-members': 2, 'no-dupe-keys': 2, 'no-duplicate-case': 2, 'no-empty-character-class': 2, 'no-empty-pattern': 2, 'no-eval': 2, 'no-ex-assign': 2, 'no-extend-native': 2, 'no-extra-bind': 2, 'no-extra-boolean-cast': 2, 'no-extra-parens': [2, 'functions'], 'no-fallthrough': 2, 'no-floating-decimal': 2, 'no-func-assign': 2, 'no-implied-eval': 2, 'no-inner-declarations': [2, 'functions'], 'no-invalid-regexp': 2, 'no-irregular-whitespace': 2, 'no-iterator': 2, 'no-label-var': 2, 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], 'no-lone-blocks': 2, 'no-mixed-spaces-and-tabs': 2, 'no-multi-spaces': 2, 'no-multi-str': 2, 'no-multiple-empty-lines': [2, { 'max': 1 }], 'no-native-reassign': 2, 'no-negated-in-lhs': 2, 'no-new-object': 2, 'no-new-require': 2, 'no-new-symbol': 2, 'no-new-wrappers': 2, 'no-obj-calls': 2, 'no-octal': 2, 'no-octal-escape': 2, 'no-path-concat': 2, 'no-proto': 2, 'no-redeclare': 2, 'no-regex-spaces': 2, 'no-return-assign': [2, 'except-parens'], 'no-self-assign': 2, 'no-self-compare': 2, 'no-sequences': 2, 'no-shadow-restricted-names': 2, 'no-spaced-func': 2, 'no-sparse-arrays': 2, 'no-this-before-super': 2, 'no-throw-literal': 2, 'no-trailing-spaces': 2, 'no-undef': 2, 'no-undef-init': 2, 'no-unexpected-multiline': 2, 'no-unmodified-loop-condition': 2, 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], 'no-unreachable': 2, 'no-unsafe-finally': 2, 'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], 'no-useless-call': 2, 'no-useless-computed-key': 2, 'no-useless-constructor': 2, 'no-useless-escape': 0, 'no-whitespace-before-property': 2, 'no-with': 2, 'one-var': [2, { 'initialized': 'never' }], 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], 'padded-blocks': [2, 'never'], 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], 'semi': [2, 'never'], 'semi-spacing': [2, { 'before': false, 'after': true }], 'space-before-blocks': [2, 'always'], 'space-before-function-paren': [2, 'always'], 'space-in-parens': [2, 'never'], 'space-infix-ops': 2, 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], 'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], 'template-curly-spacing': [2, 'never'], 'use-isnan': 2, 'valid-typeof': 2, 'wrap-iife': [2, 'any'], 'yield-star-spacing': [2, 'both'], 'yoda': [2, 'never'], 'prefer-const': 2, 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], 'array-bracket-spacing': [2, 'never'], 'vue/jsx-uses-vars': 2 }, parserOptions: { parser: 'babel-eslint' } }
其次,vscode中新增eslint和vetur外掛:
如圖所示
安裝好了之後,會自動根據你上面配置的規則進行程式碼檢查,不合格的會高亮顯示,如下圖:
經過上面步驟,目前儲存還不能自動格式化,下面說下如何自動格式化!
自動格式化設定
1、window電腦:檔案 > 首選項 > 設定 開啟 VSCode 配置檔案
2、mac電腦code>首選項 >設定
我的設定如下
{ "editor.tabSize": 2, "eslint.autoFixOnSave": true, // 每次儲存的時候將程式碼按eslint格式進行修復 "prettier.eslintIntegration": true, //讓prettier使用eslint的程式碼格式進行校驗 "prettier.semi": false, //去掉程式碼結尾的分號 "prettier.singleQuote": true, //使用單引號替代雙引號 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函式(名)和後面的括號之間加個空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" //屬性強制折行對齊 } }, "eslint.validate": [ //開啟對.vue檔案中錯誤的檢查 "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", }
關閉eslint檢查
1、vue create的專案在vue.config.js中lintOnSave: false
2、以前的專案,vue init webpack的config/index.js 檔案。 將useEslint: true 設定為useEslint: false
其他推薦
其他團隊也有自己的程式碼規範方式例如餓了麼團隊:https://www.npmjs.com/package/eslint-config-elemefe
vue團隊:https://github.com/vuejs/eslint-config-vue
關於vscode擴充套件外掛,目前通用的,不錯的推薦看這篇文章:https://github.com/varHarrie/Dawn-Blossoms/issues/10