preface

In recent months, I have built several new projects. The technology selection is mainly based on VUE3, TS, VUE-CLI/Vite and Ant-design-Vue. However, there are always some slight differences in the code style planning of the project.

1, check.js

  • The installationeslint
  • yarn add eslint -D
  • Configuration eslint
// .eslintrc.js
{
  extends: ['eslint:recommended'],}Copy the code

2, check.vue

  • The installationeslint-plugin-vue
  • yarn add eslint-plugin-vue -D
  • See the documentation for eslint-plugin-vue
// .eslintrc.js
{
  extends: ['plugin:vue/vue3-essential']  // Rules to prevent error or unexpected behavior.
  / / or
  extends: ['plugin:vue/vue3-strongly-recommended'] // Add rules that can significantly improve code readability or development experience
  / / or
  extends: ['plugin:vue/vue3-recommended'] // Add rules that enforce subjective community defaults to ensure consistency.
}
Copy the code

3, use,prettierformatting

  • The installationeslint-plugin-prettier
  • yarn add eslint-plugin-prettier -D
  • View the documentation for eslint-plugin-prettier
  • becauseeslintMay andprettierConflict found in documentation Recommended installationeslint-config-prettierPrettier used to resolve conflicts between the specification in ESLint and the specification in Prettier, where the style specification used in ESLint becomes invalid.
// .eslintrc.js
{
  "extends": ["plugin:prettier/recommended"] // Use Prettier as the ESLint specification
  Extends: ['prettier'], plugins: ['prettier']
}
Copy the code

4, parsing,typescript

  • The installation@typescript-eslint/parser: ESLint parser that parses TS to examine and standardize TS code
  • The installation@typescript-eslint/eslint-pluginEslint: This is an ESLint plug-in that contains various defined specifications for detecting TS code
  • yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
// .eslintrc.js
{
  parser: 'vue-eslint-parser'.parserOptions: {  
      ecmaVersion: 2021.parser: '@typescript-eslint/parser'./ / the parser
      sourceType: 'module'
  },
  extends: ['plugin:@typescript-eslint/recommended'],}Copy the code

5. To sum up.eslintrc.js

// .eslintrc.js
{
  root: true.env: {
    browser: true.node: true.es2021: true,},extends: [
    'eslint:recommended'.'plugin:vue/vue3-recommended'.'plugin:prettier/recommended'.'plugin:@typescript-eslint/recommended',].parserOptions: {
    ecmaVersion: 12.parser: '@typescript-eslint/parser'.sourceType: 'module'.jsxPragma: 'React'.ecmaFeatures: {
      jsx: true,}},rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"."prettier/prettier": [
      "error",
      {
        endOfLine: "auto"],},"vue/html-self-closing": "error".// ...}},// package.json
{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^ 4.26.1"."@typescript-eslint/parser": "^ 4.26.1"."eslint": "^ 7.28.0"."eslint-config-prettier": "^ 8.3.0"."eslint-plugin-prettier": "^ 3.4.0"."eslint-plugin-vue": "^ 7.10.0"."prettier": "^" 2.3.2}}Copy the code

6, configuration,.prettierrc.js

// .prettierrc.js
module.exports = {  
    printWidth: 100.// The (maximum) length of a single line of output without folding
    tabWidth: 2.// The number of Spaces for each indentation level
    tabs: false.// Use TAB indentation instead of Spaces.
    semi: false.// Whether to print semicolons at the end of statements
    singleQuote: true.// Whether to use single quotation marks
    quoteProps: 'as-needed'.// Add quotes around object attributes only when needed
    bracketSpacing: true.// Whether to add whitespace to object attributes
    jsxBracketSameLine: true.// Place the > multi-line JSX element at the end of the last line, not on the next line alone (not for closed elements),
    // The default is false, where choose > do not start another line
    htmlWhitespaceSensitivity: 'ignore'.// Specifies the global white space sensitivity of HTML files. "ignore" - white space is considered insensitive
    trailingComma: 'none'.// Remove the comma following the last element of the object
    useTabs: false.// Instead of indentation, use Spaces
    jsxSingleQuote: false.JSX uses double quotes instead of single quotes
    arrowParens: 'always'.// Arrow functions with only one argument also need parentheses
    rangeStart: 0.// The range in which each file is formatted is the entire content of the file
    proseWrap: 'always'.// Fold lines when print width is exceeded
    endOfLine: 'lf' // Use lf for line breaks
};
Copy the code

7, configuration,settings.json

  • vscodePrettier-code Formatter install the ESLint plug-in and prettier-code Formatter plug-in
  • Add the.vscode/settings.json file to the project root directory
// .vscode/settings.json
  "editor.defaultFormatter": "esbenp.prettier-vscode"."[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true."eslint.validate": [
    "javascript"."javascriptreact"."html"."vue"."typescript"."typescriptreact"].Copy the code

7, use,husky,lint-stagedCommit check fixes

  • Husky official documentation
  • Install dependenciesyarn add -D husky lint-staged

There are major configuration differences between the latest and V4 versions:

  1. Automatic installationnpx husky-init && yarnGenerate the following files:

  1. By default, the NPM test command exists in the pre-commit file and is run when you commit. It can be modified by itself.
// pre-commit
#! /bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint:lint-staged
Copy the code
  1. Modify the peckage. Json
"scripts": {
    "lint:lint-staged": "lint-staged"},..."lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": [
      "prettier --write"."eslint --cache --fix"."git add"]}Copy the code

4. Use sourcetree submitted fail to add configuration PATH = $PATH: / usr/local/bin: / usr/local/sbin

// pre-commit
#! /bin/sh
. "$(dirname "$0")/_/husky.sh"

# Fix sourcetree submission code husky report
PATH=$PATH:/usr/local/bin:/usr/local/sbin

npm run lint:lint-staged
Copy the code

After the preceding configuration, the system automatically verifies and formats the git commit command.