“ESLint+Prettier” is the easiest way to unify front-end code styles when working with multiple people, while ESLint+Prettier is the easiest way to Prettier front-end code.

Step 1 —- Install and initialize ESLint

npm install eslint --save-dev
Copy the code
eslint --init
Copy the code
Enable the Standard coding style, and install Standard
npm install eslint-plugin-standard --save-dev 
Copy the code

Step 2 —- Install Prettier and configure.eslintrc.js

npm install --save-dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
Copy the code
The.eslintrc.js file is configured as follows:
module.exports = {
  root: true.env: {
    node: true,},extends: [
    'plugin:vue/essential'.'plugin:prettier/recommended'.'@vue/standard',].parserOptions: {
    parser: 'babel-eslint',},rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'.// Enforces single quotes
    quotes: ['error'.'single'].// Force no semicolon endings
    semi: ['error'.'never'].// Close the conflict rule
    'prettier/prettier': [
      'error',
      {
        singleQuote: true.trailingComma: 'none'.bracketSpacing: true.jsxBracketSameLine: true.parser: 'flow',},],},};Copy the code

Step 3 —- Set the VScode ESLint extension

Install the VScode ESlint plugin

File –> Preferences –> Settings –> Extensions Go to ESLint and open setting.json under ESLint :Options.

Note: User Settings mean that all projects will use this setting, and workspace Settings are the Settings used by the current project

Copy the following code
{
    // vscode has the option to automatically set tabsize based on the file type enabled by default
    "editor.detectIndentation": false.// Reset tabsize
    "editor.tabSize": 2.// Automatically format each time you save
    "editor.formatOnSave": true.// Fix the code in ESLint format every time you save it
    "eslint.autoFixOnSave": true."extensions.ignoreRecommendations": true.// Let Prettier use esLint's code format for validation
    "prettier.eslintIntegration": true.// Remove the semicolon at the end of the code
     "prettier.semi": false.// Use single quotes instead of double quotes
    "prettier.singleQuote": true.// Add vUE support
    "eslint.validate": [
        "javascript"."javascriptreact",
        {
            "language": "vue"."autoFix": true}].// Use single quotes instead of double quotes
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy".// Code beautification selection
    // "vetur.format.defaultFormatter.html": "js-beautify-html",
    
    // Format the JS in vue in the ts format that comes with the editor
    "vetur.format.defaultFormatter.js": "vscode-typescript".// Format the HTML code in the vUE component
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"}},/ / formatting beautify configuration # # users to choose their own, the use is prettier
    "beautify.language": {
        "js": {
            "type": [
                "javascript"."json"."jsonc"]."filename": [
                ".jshintrc".".jsbeautifyrc"]},"css": [
            "css"."scss"]."html": [
            "htm"."html"."vue"]}}Copy the code
Save and restart the VScode client, then press Shift+Alt+f to format the code.

Note: this article some instructions, do not do too much tautology, please scientific Internet, tutorial more detailed.