Vscode saves the code and automatically formats the code settings according to the eslint specification

Time:2020-3-25

Vscode saves the code and automatically formats the code settings according to the eslint specification


The editor code style is consistent and is part of the front-end code specification. In the same project, or in the same group, it is necessary to keep the code style consistent. Take the Vue project for example. In the previous projects, a lot of small partner codes are formatted with Vue beauty. This format tool has an obvious disadvantage, that is, the three-dimensional inequality can be displayed in one line, and it has to be formatted into three lines. Import uses {} to introduce multiple variables or functions, and it has to be formatted into several lines, which seems very awkward. Therefore, good formatting tools and team code style are consistent, which is particularly important. I suggest that our whole team use the same editor, the same code verification, and the same format. Let me introduce a way to use vscode + eslint to save and format automatically!

Eslint auto format

Let’s start with a premise. You have installed the dependency of eslint in package.json, otherwise the configuration is useless.

"eslint": "^6.1.0",
"eslint-friendly-formatter": "^6.4.1",
"eslint-loader": "^6.4.1",
"eslint-plugin-html": "^6.4.1",

The above is a premise. Here are the specific configuration steps:

FirstAdd. Eslintrc.js file in our project and directory to verify the code and write the relevant rules of eslint. For specific rules of eslint, please see the eslint document

The following are the eslint rules commonly used in our project:

module.exports = {
root: true,
//Add plug-in
"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',
//Allow console output
'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'
}
}

Secondly, add eslint in vscode:
As shown in the figure
Vscode saves the code and automatically formats the code settings according to the eslint specification

After installation, the code will be checked automatically according to the rules configured above, and the unqualified ones will be highlighted, as shown in the following figure:

After the above steps, the current save can not be automatically formatted. Let’s talk about how to automatically format!

AutoFormat settings

1. Windows PC: File > Preferences > Settings open vscode profile
2. MAC PC code > Preferences > Settings

My settings are as follows:

{
  "workbench.colorTheme": "Material Theme",
  "window.zoomLevel": 0,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.enableSmartCommit": true,
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true,
  "breadcrumbs.enabled": true,
  "workbench.activityBar.visible": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "explorer.confirmDelete": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

In this way, you can save the auto format code according to the configuration. The experience is as follows:

Vscode saves the code and automatically formats the code settings according to the eslint specification

Turn off eslint check

1. The project of Vue create is lintonsave: false in vue.config.js
2. Previously, the config / index.js file of Vue init webpack. Set useeslint: true to useeslint: false

Other recommendations

Other teams also have their own code specifications, such as hungry team: https://www.npmjs.com/package
Vue team: https://github.com/vuejs/esli
For the vscode extension, see this article: https://github.com/varharrie/