子曰：“工欲善其事，必先利其器”, 編碼必須的就是有一個順手的ide，然而光有還不行，還要懂得配置，畢竟不同的團隊代碼規范不同，如目前用得較多的就是eslint，今天就順便記錄下vscode + eslint 配置代碼檢測
文章目錄
一、安裝 Eslint
首選得在ide安裝eslint插件
二、安裝 Prettier-Code formatter
目前新的vscode 都需要安裝這個 代碼格式化插件
否則會提示 Extension 'esbenp.prettier-vscode' is configured as formatter but not available. Select a different default formatter to continue.
三、安裝Vetur
目前vue 用的比較多，當然避不了的使用一個格式.vue的文件，如：
四、配置 setting.json
找到File > Preference > Settings > Text Editor > Code Actions On Save > Edit in setting.json打開進行編輯
截圖如
添加如下的配置到你的setting.json (這個注釋很全就不過得解釋了)
{ "workbench.startupEditor": "newUntitledFile", "window.zoomLevel": 1, // window be show of level in ide "git.ignoreMissingGitWarning": true, "explorer.confirmDelete": false, "workbench.colorTheme": "One Dark Pro", "docthis.authorName": "tomAnny", "docthis.includeDescriptionTag": true, "docthis.includeDateTag": true, "docthis.includeAuthorTag": true, "terminal.integrated.rendererType": "dom", // vscode默認啟用了根據文件類型自動設置tabsize的選項 "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // 強制單引號 "prettier.singleQuote": true, "prettier.semi": false, // 盡可能控制尾隨逗號的打印 "prettier.trailingComma": "all", // #這個按用戶自身習慣選擇 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, //防止VSCode啟動帶有node_modules的項目的時候很卡的問題 "search.followSymlinks": false, "files.autoSave": "onWindowChange", "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[scss]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, // #每次保存的時候將代碼按eslint格式進行修復 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }
五、配置 .eslintrc.js
現在需要將項目中對應的elsintrc.js配置一下，來規范整個項目的代碼風格，避免團隊人員多了，代碼五花八門,
個人配置大概如下：
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue/recommended', 'eslint:recommended'], // add your custom rules here //it is base on https://github.com/vuejs/eslint-config-vue rules: { "vue/max-attributes-per-line": [2, { "singleline": 10, "multiline": { "max": 1, "allowFirstLine": false } }], "vue/singleline-html-element-content-newline": "off", "vue/multiline-html-element-content-newline":"off", "vue/name-property-casing": ["error", "PascalCase"], "vue/no-v-html": "off", 'accessor-pairs': 2, 'arrow-spacing': [2, { 'before': true, 'after': true }], 'block-spacing': [2, 'always'], 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], 'camelcase': [0, { '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': ["error", "always", {"null": "ignore"}], '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-console': 'off', 'no-class-assign': 2, 'no-cond-assign': 2, 'no-const-assign': 2, 'no-control-regex': 0, '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, 'never'], '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'] } }
關於該ESlint 配置詳解請移步 ESlint配置詳解這一篇進行查看
六、配置 .editorconfig
再配置一個代碼 空格，縮進、換行等規范
看看官方對這個editor的介紹
What is EditorConfig?
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.
# https://editorconfig.org root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true [*.md] insert_final_newline = false trim_trailing_whitespace = false
OK 配置完成現在可以開始開心的編碼了(閑時整理忙時用，避免一台新電腦片地找配置)