ESLint

初始化eslint配置

npm init @eslint/config

检查语法、发现问题、强制执行代码样式

默认安装了下列npm包：

 "@eslint/js": "^9.2.0",
 "eslint": "^9.2.0",
 "eslint-plugin-vue": "^9.26.0",
 "typescript-eslint": "^7.9.0",

根目录下生成eslint.config.mjs文件

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";


export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

vscode安装eslint插件

安装插件后默认项目下的js文件中，有问题的语句在语句下面会出现黄色或者红色的波浪线提示

如果有.ts、.vue文件，需要修改setting.json文件。vscode编辑器左下角点击设置图标，默认用户标签下即可，vscode右上角第二排的文件图标可以切换为文本编辑。

在setting.json文件中添加如下配置：

 "eslint.validate": ["typescript", "vue"]

如果遇到其他未知错误时，如eslint插件不生效，打开eslint配置文件，点击vscode编辑器右下角{}，再点击open eslint output，可找到不生效的原因。

遇到的问题

Parsing error: Unexpected token :eslint

Parsing error: The keyword 'interface' is reservedeslint

这些报错是因为在.vue文件的<script>部分使用的是ts，这块需要自定义下

首先安装vue-eslint-parser

 "vue-eslint-parser": "^9.4.2"

在eslint.config.cjs文件中自定义parser

{
    languageOptions: { 
      globals: globals.browser,
      parser: vueEslintParser,
      parserOptions: {
        parser: tseslint.parser ,
      }
    }
  },

Prettier

代码格式化工具

安装Prettier

pnpm add --save-dev --save-exact prettier

--save-exact的作用就是固定依赖包的版本，不要带^或～，避免出现小版本，有利于版本统一。

版本号说明：不带符号表示安装指定的版本

～号作用于小版本，会安装最新的小版本
^号作用于大版本，会安装最新的大版本

Prettier命令

npx prettier . --write 格式化所有的文件，会自动修复
npx prettier . --check 只检测格式化，不会自动修复

VSCode安装Prettier插件

项目根目录下新增.prettierrc文件，并设定一些规则

{
    "tabWidth": 2,
    "semi": false,
    "vueIndentScriptAndStyle": false
}

在用户setting.json中设置默认格式化程序

 "editor.defaultFormatter": "esbenp.prettier-vscode"

在用户setting.json中设置保存时格式化

"editor.formatOnSave": true,

安装`eslint-plugin-prettier`

将Prettier作为ESLint规则运行，并将差异报告为单个ESLint问题。

安装版本："eslint-plugin-prettier": "^5.1.3",

在eslint.config.cjs配置文件中配置eslint-plugin-prettier

配置后：

启动prettier/prettier规则
禁用arrow-body-style 和 prefer-arrow-callback规则
启动eslint-config-prettier配置，它将关闭与prettier冲突的eslint规则。

eslint-plugin-prettier依赖eslint-config-prettier，所以需要安装eslint-config-prettier。

pnpm install --save-dev eslint-config-prettier

 // "eslint-config-prettier": "^9.1.0",

安装`eslint-config-prettier`

安装eslint-config-prettier解决eslint和prettier规则冲突。

比如：在.prettiierrc文件中设置 "singleQuote": true，在eslint.config.cjs中设置quotes: "warn"时，保存文件时，所有双引号会自动按照prettier的规则替换成单引号，但此时单引号不符合eslint的quotes: "warn"规则，此时会显示黄色的波浪线警告。

配置eslint检测脚本

在eslint.config.cjs文件中配置不需要检测的文件夹

{
    ignores: ["src/assets", "dist"],
  },

stylelint

初始化stylelint

 npm init stylelint

执行该命令后，会在根目录下创建.stylelintrc.json文件，并安装相关的依赖包，由于我使用的是pnpm安装包命令，导致安装npm包失败，所以再手动安装下pnpm install -D stylelint stylelint-config-standard

.stylelintrc.json文件默认内容如下：

{ "extends": ["stylelint-config-standard"] }

安装stylelint-config-standard-scss 因为项目中使用的scss，则用插件stylelint-config-standard-scss替换stylelint-config-standard
安装stylelint-config-standard-vue

修改.stylelintrc.json文件内容如下：

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-standard-vue/scss"
  ]
}

在vscode用户setting.json文件中设置stylelint生效的文件类型

5. vscode显示报错提示

上述配置完成后，不符合stylelint规则的scss语句就会出现如下报错提示： 6. 在vscode用户setting.json文件中设置stylelint规则保存自动修复

保存文件后，自动修复不合stylelint规范的scss语句。 7. 不符合规范的文件太多，在package.json文件中添加脚本，批量执行

配置完成后，执行pnpm run lint:css

如上图所示，能够修复的已经自动修复了，剩余的是需要手动处理的。 8. stylelint和prettier规则冲突问题

从Styleint v15开始，Styleint弃用了所有与prettier冲突的风格规则，并在Styleint v16中删除了这些规则。如果您使用的是Stylelint v15或更高版本，并且没有使用这些不推荐使用的规则，那么您不需要做任何额外的操作；

vscode的用户setting.json文件上面两个规则同时设置，文件保存时都会生效。

prettier自身的冲突比如：下面两个规则设置相反时，会冲突
stylelint-prettier

stylelint-prettier 和 eslint-plugin-prettier 有相同的作用， eslint中配置了eslint-plugin-prettier，所以prettier报错提示为

Insert `··`eslint[prettier/prettier]

此时eslint[prettier/prettier]会作用于css，而不只是js。执行npx eslint --fix 也会修复css的prettier问题，所以此时是不需要再配置stylelint-prettier的。

如果没有配置eslint-plugin-prettier，而是配置stylelint-prettier，则在执行npx stylelint --fix 会修复prettier问题（默认情况下如果没有配置stylelint-prettier执行npx stylelint --fix是不会识别和修复prettier格式问题）。

问题： stylelint-prettier（只能 css 单独文件代码检查与格式化）无法对 vue 中 template 上 style 以及 style 中 css 的检查格式化问题

目前还没有找到方式解决，不过在项目中eslint通过使用eslint-plugin-prettier和eslint-plugin-vue，使得prettier已经在vue单文件的css部分已生效，所以该问题可以暂不解决。

参考

参考视频：www.bilibili.com/video/BV1BV…

vscode的用户设置和工作区设置

“用户设置”会应用于用户打开的所有工程
“工作区设置”是指使用VScode打开的某个文件夹，在该文件夹下会创建一个名为.vscode的隐藏文件夹，里面包含着仅使用于当前目录的VS Code的设置。
“工作区设置”会覆盖“用户设置”
每个人都有自己的偏好，在使用VScode进行开发时，都会根据自己的习惯来对VS Code进行用户级别的配置。
但是当多人共同完成某个项目的时候，该项目会有一定的编码规范，如：编辑某个语言时的设置，代码的缩进等等，这个时候就需要对该项目进行单独的工作空间级别的设置。

前端编码风格统（eslint、prettier、stylelint）