Vite+V3项目环境代码校验

项目场景：

配置eslint+prettier+stylelint

---

一、Eslint

1.安装Eslint

npm i eslint -D

---

2.运行Eslint

npm init @eslint/config

---

3.安装vue3环境代码校验插件

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

//让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
“eslint-config-prettier”: “^9.0.0”,
“eslint-plugin-import”: “^2.28.1”,
“eslint-plugin-node”: “^11.1.0”,
//运行更漂亮的Eslint插件，使prettier规则优先级更高，Eslint优先级低
“eslint-plugin-prettier”: “^5.0.0”,
//vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南）
“eslint-plugin-vue”: “^9.17.0”,
//该解析器允许使用Eslint校验所有babel code
“@babel/eslint-parser”: “^7.22.10”,
————————————————
版权声明：本文为CSDN博主「花椒和蕊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49668076/article/details/132423999

---

4.安装好后重新配置.eslintrc.cjs文件

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",
    "plugin:prettier/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":"off", //防止<script setup>使用的变量<template>标记为未使用
    "vue/no-mutating-props": "off", //不允许组件props的改成
    "vue/attribute-hyphenation": "off", //对模板中的自定义组件强制执行属性命名样式
  },
};

---

5.新建.eslintignore忽略文件

---

6.添加运行脚本

---

二、Prettier

1.安装依赖包

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

---

2.添加规则，新增.prettier.json

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

---

3.新增忽略文件.prettierignore

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

---

三、Stylelint

1.安装插件

npm i stylelint stylelint-config-recess-order

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

---

2.新增.stylelintrc.cjs配置文件

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属性书写顺序插件
    ],
    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默认样式的时候能使用到
            }
        ]
    }
}

---

3.新增.stylelintignore忽略文件

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

---

4.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 会把代码直接格式化