Of Stack

Method Implementation of vue3+ts+EsLint+Prettier Specification Code

  • 2021-11-29 22:58:19
  • OfStack
Directory usage Using EsLint to add configuration files
Use of Prettier Use husky and lint-staged Build Code Add setting. json Configuration Resources

This paper mainly introduces how to install and configure EsLint and Prettier in Vue3 to improve the coding specification when TypeScript is used for development.
(1) EsLint provides coding specifications;
(2) Prettier is a code formatting tool for Opinionated.

Use

Use of EsLint

Install dependencies 


npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

These four dependencies are:

-` eslint `: Core code for EsLint -` eslint-plugin-vue `: [Use Eslint plug-in for Vue] (https://eslint.vuejs.org/) -` @ typescript-eslint/parser `: A parser for ESLint to parse typescript to review and standardize Typescript code -` @ typescript-eslint/eslint-plugin `: This is an ESLint plug-in that contains various well-defined specifications for detecting Typescript code

Add Configuration File 


npx eslint --init

Add the. eslintrc. js file to the root directory. (It is recommended to select js file, json can not write comments) Modify the configuration file
It mainly modifies the relevant configuration in rules. For details, please view the official configuration 


/*!
 * https://eslint.bootcss.com/docs/rules/
 * https://eslint.vuejs.org/rules/
 *
 * - 0: off
 * - 1: warn
 * - 2: error
 */
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true
    }
  },
  globals: {
    AMap: false,
    AMapUI: false
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_'
      }
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_'
      }
    ],
    'space-before-function-paren': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'], // vue/component-definition-name-casing  Enforce a specific size for component definition names 
    'vue/attributes-order': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
    'vue/script-setup-uses-vars': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ]
  }
}

Use of Prettier

Install dependencies 


npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

These three dependencies are:

-` prettier `: Core code for the prettier plug-in -` eslint-config-prettier `: Resolve the conflict between the style specification in ESLint and the style specification in prettier, the style specification in prettier shall prevail, and the style specification in ESLint shall automatically fail -` eslint-plugin-prettier `: Use prettier as the ESLint specification

Add Configuration File

Create the `. prettierrc. js ` file under the root directory of the project and add the following configuration 


module.exports = {
  printWidth: 120, //  Newline string threshold 
  tabWidth: 2, //  Set the tool per 1 Number of horizontally indented spaces 
  useTabs: false,
  semi: false, //  Is there a semicolon at the end of the sentence 
  vueIndentScriptAndStyle: true,
  singleQuote: true, //  Use single quotation marks 
  trailingComma: 'none', //  Finally 1 Object elements with commas 
  bracketSpacing: true, //  Object, array and space 
  jsxBracketSameLine: true, // jsx >  Whether it starts from another 1 Row 
  arrowParens: 'always', // (x) => {}  Do you want parentheses 
  requirePragma: false, //  You don't need to write at the beginning of the file  @prettier
  insertPragma: false //  You do not need to insert automatically at the beginning of the file  @prettier
}

Adding Prettier to EsLint

Modify the '. eslintrc. js' file to add in extends 


    'prettier',
    'plugin:prettier/recommended'

Among them:

-` prettier/@ typescript-eslint `: invalidate the style specification in @ typescript-eslint and follow the style specification in prettier -` plugin: prettier/recommended `: Use the style specification in prettier and throw the format problem as error if ESLint detects the format problem in prettier

Build code using husky and lint-staged

Install dependencies 


npm i --save-dev husky lint-staged

Modification of package. json
Add the following code 


    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src*/**/*.ts": [
            "prettier --config .prettierrc.js --write",
            "eslint",
            "git add"
        ],
        "src*/**/*.json": [
            "prettier --config .prettierrc.js --write",
            "eslint",
            "git add"
        ]
    }

In this way, when git commit is executed, EsLint checks the submitted code.

Adding setting. json configuration

Add the 'setting. json' configuration file to the. vscode folder for automatic repair and verification of code when saved automatically. 


{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "volar.tsPlugin": true,
  "volar.tsPluginStatus": false,
  //===========================================
  //============= Editor ======================
  //===========================================
  "explorer.openEditors.visible": 0,
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "diffEditor.ignoreTrimWhitespace": false,
  //===========================================
  //============= Other =======================
  //===========================================
  "breadcrumbs.enabled": true,
  "open-in-browser.default": "chrome",
  //===========================================
  //============= files =======================
  //===========================================
  "files.eol": "\n",
  "search.exclude": {
    "**/node_modules": true,
    "**/*.log": true,
    "**/*.log*": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "out": true,
    "dist": true,
    "node_modules": true,
    "CHANGELOG.md": true,
    "examples": true,
    "res": true,
    "screenshots": true,
    "yarn-error.log": true,
    "**/.yarn": true
  },
  "files.exclude": {
    "**/.cache": true,
    "**/.editorconfig": true,
    "**/.eslintcache": true,
    "**/bower_components": true,
    "**/.idea": true,
    "**/tmp": true,
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/.vscode/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true,
    "**/yarn.lock": true
  },
  "stylelint.enable": true,
  "stylelint.packageManager": "yarn",
  "liveServer.settings.donotShowInfoMsg": true,
  "telemetry.enableCrashReporter": false,
  "workbench.settings.enableNaturalLanguageSearch": false,
  "path-intellisense.mappings": {
    "/@/": "${workspaceRoot}/src"
  },
  "prettier.requireConfig": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "workbench.sideBar.location": "left",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": false
    }
  },
  "cSpell.words": [
    "vben",
    "windi",
    "browserslist",
    "tailwindcss",
    "esnext",
    "antv",
    "tinymce",
    "qrcode",
    "sider",
    "pinia",
    "sider",
    "nprogress"
  ]
}

References

Prettier official website
EsLint official website
EsLint Rules
Prettier Just read this one article
Using EsLint+Prettier specification TypeScript code

Related articles: