Vscode configuration code automatic formatting and repair

Confucius said ：“ A good workman does his work well , You must sharpen your tools first ”, What is necessary for coding is to have a handy ide, However, it's not enough just to have , Also know how to configure , After all, different teams have different code specifications , For example, at present, it is used more eslint, I'll record it by the way today vscode + eslint Configure code detection

One 、 install Eslint

The first choice is ide install eslint plug-in unit

Two 、 install Prettier-Code formatter

Current new vscode You need to install this Code formatting plug-in

Otherwise, it will prompt Extension 'esbenp.prettier-vscode' is configured as formatter but not available. Select a different default formatter to continue.

3、 ... and 、 install Vetur

at present vue It's used a lot , Of course, you can't avoid using a format .vue The file of , Such as ：

Four 、 To configure setting.json

find File > Preference > Settings > Text Editor > Code Actions On Save > Edit in setting.json Open for editing
The screenshot is like

Add the following configuration to your setting.json ( This annotation is very complete, but it has to be explained )

{
    
    "workbench.startupEditor": "newUntitledFile",
    "window.zoomLevel": 1, // window be show of level in ide
    "git.ignoreMissingGitWarning": true,
    "explorer.confirmDelete": false,
    "workbench.colorTheme": "Monokai",
    "workbench.colorCustomizations": {
    
        "[Monokai]": {
    
        "editor.background": "#1a2c1c",
        "sideBar.background": "#2a3b2d",
        "activityBar.background": "#7154978a",
        "icon.foreground": "#893ecf",
        "activityBar.inactiveForeground": "#ffee00b4",
        },
    },
    "docthis.authorName": "tomAnny",
    "docthis.includeDescriptionTag": true,
    "docthis.includeDateTag": true,
    "docthis.includeAuthorTag": true,
    "vsicons.dontShowNewVersionMessage": true,
    "terminal.integrated.rendererType": "dom",
    // vscode The default is to enable automatic settings based on file type tabsize The option to 
    "editor.detectIndentation": false,
    //  Reset tabsize
    "editor.tabSize": 2,
    // # Format automatically every time you save  
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    //  Force single quotes 
    "prettier.singleQuote": true,
    "prettier.semi": false,
    //  Try to control the printing of trailing commas 
    "prettier.trailingComma": "all",
    // # This is selected according to the user's own habits -- prettier  perhaps js-beautify-html
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // # Give Way vue Medium js Press the editor's own ts Format to format  
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "html.format.indentHandlebars": true,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "html.format.enable": false,
    "html.format.preserveNewLines": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "vetur.format.defaultFormatterOptions": {
    
      "js-beautify-html": {
    
        "wrap_attributes": "force-aligned"
        // #vue In the component html Code formatting style 
      }
    },
    // prevent VSCode Start with node_modules The problem of being too laggy in the project 
    "search.followSymlinks": false,
    "files.autoSave": "onWindowChange",
    "[vue]": {
    
      //"editor.defaultFormatter": "octref.vetur"
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
    
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[scss]": {
    
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[html]": {
    
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[css]": {
    
      "editor.defaultFormatter": "HookyQR.beautify"
   },
    // # Press eslint Format for repair 
    "editor.codeActionsOnSave": {
    
      "source.fixAll.eslint": true
    },
  }

Please refer to Official website https://code.visualstudio.com/docs/getstarted/settings

5、 ... and 、 To configure .eslintrc.js

Now you need to set the corresponding elsintrc.js Configure it , To standardize the code style of the whole project , Avoid having too many team members , There are various codes ,

Personal configuration is as follows ：

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

About that ESlint For detailed configuration, please move ESlint Configuration details Check this one

6、 ... and 、 To configure .editorconfig

Configure another code Space , Indent 、 Line feed and other specifications

Look at the official response to this editor Introduction to

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 After configuration, you can now start coding happily ( Tidy up in your spare time and use it in your busy time , Avoid finding configurations for a new computer )