vue3+ts+EsLint+Prettier standard code implementation

vue3+ts+EsLint+Prettier standard code implementation

This article mainly introduces how to install and configure EsLint and Prettier when using TypeScript for development in Vue3 to improve coding standards.
(1) EsLint provides coding standards;
(2) Prettier is an Opinionated code formatting tool.

use

Use of EsLint

Install Dependencies

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

The four dependencies are:

  • - `eslint`: EsLint's core code
  • - `eslint-plugin-vue`: [A plugin for using Eslint for Vue](https://eslint.vuejs.org/)
  • - `@typescript-eslint/parser`: ESLint's parser, used to parse typescript, thereby checking and standardizing Typescript code
  • - `@typescript-eslint/eslint-plugin`: This is an ESLint plugin that contains various defined specifications for detecting Typescript code

Add a profile

npx eslint --init

Add .eslintrc.js file in the root directory. (It is recommended to select js file, json cannot write comments) Modifying the configuration file mainly modifies the relevant configuration in rules. For details, please refer to 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 enforces 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

The three dependencies are:

  • - `prettier`: the core code of the prettier plugin
  • - `eslint-config-prettier`: resolves the conflict between the style specifications in ESLint and prettier, and takes prettier's style specifications as the priority, automatically invalidating the style specifications in ESLint
  • - `eslint-plugin-prettier`: Use prettier as ESLint specification

Add a profile

Create a .prettierrc.js file in the root directory of the project and add the following configuration

module.exports = {
  printWidth: 120, // Line break string threshold tabWidth: 2, // Set the number of spaces for each horizontal indentation of the tool useTabs: false,
  semi: false, // Whether to add a semicolon at the end of the sentence vueIndentScriptAndStyle: true,
  singleQuote: true, // Use single quotes trailingComma: 'none', // Add a comma to the last element of an object bracketSpacing: true, // Add spaces to objects and arrays jsxBracketSameLine: true, // Does jsx > start a new line arrowParens: 'always', // Does (x) => {} need parentheses requirePragma: false, // No need to write @prettier at the beginning of the file
  insertPragma: false // No need to automatically insert @prettier at the beginning of the file
}

Adding Prettier to EsLint

Modify the `.eslintrc.js` file and add in extends

    'prettier',
    'plugin:prettier/recommended'

in:

  • - `prettier/@typescript-eslint`: invalidates the style specification in @typescript-eslint and follows the style specification in prettier
  • - `plugin:prettier/recommended`: Use the style specifications in prettier, and if ESLint is enabled, it will detect formatting issues in prettier and also throw formatting issues as errors

Build code using husky and lint-staged

Install Dependencies

npm i --save-dev husky lint-staged

Modify 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 you execute git commit, EsLint will check the submitted code.

Add setting.json configuration

Add the `setting.json` configuration file in the .vscode folder to automatically repair and verify the code when automatically saving.

{
  "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 article Use EsLint+Prettier to standardize TypeScript code

This is the end of this article about the implementation of vue3+ts+EsLint+Prettier standard code. For more relevant vue3 ts standard code content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of the use of ESLint in Vue
  • Vue scaffolding vue-cli learning and use tutorial
  • How to use eslint and editorconfig in Vue

<<:  How to change the website accessed by http to https in nginx

>>:  W3C Tutorial (7): W3C XSL Activities

Recommend

Manually implement js SMS verification code input box

Preface This article records a common SMS verific...

Detailed tutorial for installing mysql5.7.21 under Windows system

MySQL Installer provides an easy-to-use, wizard-b...

A brief discussion on whether CSS animation will be blocked by JS

The animation part of CSS will be blocked by JS, ...

Tomcat multi-instance deployment and configuration principles

1. Turn off the firewall and transfer the softwar...

Detailed tutorial on installation and configuration of compressed version of MySQL database

Table of contents 1. Download MySQL 2. Unzip the ...

Analysis and solution of Chinese garbled characters in HTML hyperlinks

A hyperlink URL in Vm needs to be concatenated wit...

How to set mysql to case insensitive

mysql set to case insensitive Windows Go to the d...

Implementation of remote Linux development using vscode

Say goodbye to the past Before vscode had remote ...

Complete steps to quickly configure HugePages under Linux system

Preface Regarding HugePages and Oracle database o...

VUE implements token login verification

This article example shares the specific code of ...

Detailed explanation of three ways to connect Docker containers to each other

There are three ways to interconnect and communic...

Play with the connect function with timeout in Linux

In the previous article, we played with timeouts ...

Detailed explanation of four solutions for MySQL active-active synchronous replication

Table of contents Master-Master Synchronization S...

How to use Vue-router routing

Table of contents 1. Description 2. Installation ...

Eight rules for effective web forms

If you're collecting information from your us...