[vue3+ts project] Configure eslint verification code tool, eslint+prettier+stylelint

1. Open the browser automatically after running

Add --open after vite in package.json

2. Install eslint

npm i eslint -D

3. After running eslint --init, answer some questions and automatically create the .eslintrc configuration file.

npx eslint --init

Answer the questions as follows:

Use eslint to check only grammar, or check grammar and errors, choose what module is used for the second one , choose what framework is used for

the first project, choose TyoeScript in the vue project, choose where the yes project runs, and choose the browser What type of configuration needs to be created? Do you need to install these plug-ins if you choose Javascript ? Check the ts syntax, check the vue syntax, and what package management tool to use if you choose yes. I am installing npm here. There will be an additional .eslintrc.cjs file in the project

4. Install the vue3 environment code verification plug-in

//Invalidate all Eslint rules that conflict with prettier rules, and use prettier for code inspection
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-node": "^11.1.0",
//Run a more beautiful Eslint plugin to make prettier rules have a higher priority and Eslint have a lower priority
"eslint-plugin-prettier": "^5.0.0" ,
//Eslint plugin for vue.js (find vue syntax errors, find wrong instructions, find violation style guidelines)
"eslint-plugin-vue": "^9.17.0",
//This parser allows to use Eslint to verify all babel code
“@babel/eslint-parser”: “^7.22.10”,

npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

5. Reconfigure the .eslintrc.cjs file after installation

module.exports = {
    
    
  env: {
    
    
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  // 指定如何解析语法
  parser: "vue-eslint-parser",
  //优先级低于parse的语法解析配置
  parserOptions: {
    
    
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    jsxPragma: "Recat",
    ecmaFeatures: {
    
    
      jsx: true,
    },
  },
  //   继承已有的规则
  extends: [
    "eslint:recommended",
    "plugin: @typescript-eslint/recommended",
    "plugin: vue/vue3-essential",
    "parser: pretter/recommended",
  ],
  overrides: [
    {
    
    
      env: {
    
    
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
    
    
        sourceType: "script",
      },
    },
  ],
  /**
   * 'off' 或0  ==>关闭规则
   * 'warn'或1   ==>打开的规则作为警告
   * 'error'或2   ==>规则作为一个错误（代码不能执行，界面报错）
   */

  plugins: ["@typescript-eslint", "vue"],
  rules: {
    
    
    "no-var": "error", //要求使用let或const而不是var
    "no-multiple-empty-lines": ["warn", {
    
     max: 1 }], //不允许多个空行
    "no-console": process.env.NODE_ENV == "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV == "production" ? "error" : "off",
    "no-unexpected-multiline": "error", //禁止空余的多行
    "no-useless-escape": "off", //禁止不必要的转移字符
    "@typescript-eslint/no-unused-vars": "error", //禁止定义未使用的变量
    "@typescript-eslint/prefer-ts-expect-error": "error", //禁止使用@ts-ignore
    "@typescript-eslint/no-explicit-any": "off", //禁止使用any类型
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-namespace": "off", //禁止使用自定义Typescript模板
    "@typescript-eslint/semi": "off",
    "vue/multi-word-component-names": "off", //要求组件名称始终为'-'链接的单词
    "vue/script-setup-users-vars": "error", //防止<script setup>使用的变量<template>标记为未使用
    "vue/no-mutating-props": "off", //不允许组件props的改成
    "vue/attribute-hyphenation": "off", //对模板中的自定义组件强制执行属性命名样式
  },
};

6. Create a new .eslintignore ignore file, no verification required

7. Add running script, add in package.json, npm run lint check syntax, npm run fix modify error syntax

    "lint":"eslint src",
    "fix":"eslint src --fix"

8. Configure prettier

eslint guarantees the quality of js code, prettier guarantees beautiful code, unified format, and supports protection of multiple languages ​​including js

npm install -D eslint-plugin-prettier eslint-config-prettier

9. Add .prettier.json

{
    
    
    
    "singleQuote":true,
    "semi":false,
    "bracketSpacing":true,
    "htmlWhitespaceSensitivity":"ignore",
    "endOfLine":"auto",
    "trailingComma":"all",
    "tabWidth":2
}

10. Add .prettierignore

/dist/*
/html/*
.local
/node_modules/**
**/* .svg
**/* .sh
/public/*

Run npm run lint and encounter an error

Delete all spaces in the .eslintrc.cjs file, such as spaces in rules

Then run npm run lint again, and encounter an error again.


The correct one in the eslintrc.cjs file is:

Now it is ok.


After executing npm run fix


and then executing npm run lint, there is no error message

11. Install stylint related plug-ins

npm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

Encountering an error

This error means that the version of stylelint is currently 14.16.1, [email protected] requires a version of stylelint between 11-15
[email protected] requires stylelint version greater than or equal to 15

Install stylelint-config-prettier and stylelint separately

npm add [email protected]
npm add stylelint@12

Install stylelint-config-recess-order separately

npm add [email protected]

An error will be reported here, because stylelint is installed with version 12

to reinstall stylelint

npm add stylelint@15

There are still warnings, but it is not that err is wrong,

and then install the rest

npm add sass sass-loader postcss postcss-scss postcss-html stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

The installation is successful, start configuring stylelint

12. stylelint is a css lint tool, which can format css code, check css syntax errors and unreasonable writing, specify css writing order, etc. Newly added .stylelintrc.cjs configuration file

module.export = {
    
    
    //官网https://stylelint.bootcss.com/
    extends: [
        'stylelint-config-standard',//配置stylelint拓展插件
        'stylelint-config-html/vue',//配置vue中template样式格式化
        'stylelint-config-standard-scss',//配置stylelint scss插件
        'stylelint-config-recommended-vue/scss',//配置vue中scss样式格式化
        'stylelint-config-recess-order',//配置stylelint css属性书写顺序插件
        'stylelint-config-prettier',//配置stylelint和prettier兼容

    ],
    overrides: [
        {
    
    
            files: ['**/*.(scss|css|vue|html)'],
            customSyntax:'postcss-scss',
        },
         {
    
    
            files: ['**/*.(html|vue)'],
            customSyntax:'postcss-html',
        }
    ],
    ignoreFiles: [
        '**/*.js',
        '**/*.jsx',
        '**/*.tsx',
        '**/*.ts',
        '**/*.json',
        '**/*.md',
        '**/*.yaml',
    ],
    /**
     * null 关闭该规则
     * always 必须
     */
    rules: {
    
    
        'value-keyword-case': null,//在css中使用v-bind不报错
        'no-descending-specificity': null,//禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
        'function-url-quotes': 'always',//要求或禁止URL的引号"always"必须加上引号，"never"没有引号
        'no-empty-source': null,//关闭禁止空源码
        'selector-class-pattern': null,//关闭强制选择器类名的格式
        'property-no-unknown': null,//禁止未知的属性，true为不允许
        'block-opening-brace-space-before': 'always',//大括号之前必须有一个空格或不能有空白符
        'value-no-vendor-prefix': null,//关闭属性值前缀  --webkit-box
        'property-no-vendor-prefix': null,//关闭属性前缀  --webkit-mask
        'selector-pseudo-class-no-unknown': [
            // 不允许未知的选择器
            true,
            {
    
    
                ignorePseudoClasses:['global','v-deep','deep'],//忽略属性，修改elememt默认样式的时候能使用到
            }
        ]
    }
}

13. Add .stylelintignore ignore file

/dist/*
/html/*
/node_modules/*
/public/*

14. Add running script, add in package.json

      "format":"prettier --write\"./**/*.{html,vue,ts,js,jsom,md}\"",
      "lint:eslint":"eslint src/**/*.{ts,vue} --cache --fix",
      "lint:style":"stylelint src/**/*.{css,scss,vue} --cache --fix"

npm run format will format the code directly