vscode 配置代碼自動格式化加修復(fù)

子曰：“工欲善其事瞄勾，必先利其器”, 編碼必須的就是有一個順手的ide，然而光有還不行辛掠，還要懂得配置谢谦，畢竟不同的團(tuán)隊(duì)代碼規(guī)范不同，如目前用得較多的就是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 用的比較多千劈，當(dāng)然避不了的使用一個格式.vue的文件，如：

在這里插入圖片描述

四牌捷、配置 setting.json

找到File > Preference > Settings > Text Editor > Code Actions On Save > Edit in setting.json打開進(jìn)行編輯
截圖如

在這里插入圖片描述

添加如下的配置到你的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默認(rèn)啟用了根據(jù)文件類型自動設(shè)置tabsize的選項(xiàng)
  "editor.detectIndentation": false,
  // 重新設(shè)定tabsize
  "editor.tabSize": 2,
  // #每次保存的時候自動格式化 
  "editor.formatOnSave": false,
  // 強(qiáng)制單引號
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // 盡可能控制尾隨逗號的打印
  "prettier.trailingComma": "all",
  // #這個按用戶自身習(xí)慣選擇 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue組件中html代碼格式化樣式
    }
  },
  //防止VSCode啟動帶有node_modules的項(xiàng)目的時候很卡的問題
  "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"
  },
  // #每次保存的時候?qū)⒋a按eslint格式進(jìn)行修復(fù)
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

五墙牌、配置 .eslintrc.js

現(xiàn)在需要將項(xiàng)目中對應(yīng)的elsintrc.js配置一下，來規(guī)范整個項(xiàng)目的代碼風(fēng)格暗甥，避免團(tuán)隊(duì)人員多了喜滨，代碼五花八門,

個人配置大概如下：

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']
  }
}

關(guān)于該ESlint 配置詳解請移步 ESlint配置詳解這一篇進(jìn)行查看

六、配置 .editorconfig

再配置一個代碼空格撤防，縮進(jìn)虽风、換行等規(guī)范

看看官方對這個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 配置完成現(xiàn)在可以開始開心的編碼了(閑時整理忙時用，避免一臺新電腦片地找配置)