概览

vscode 安装 eslint、prettier（可选）、stylelint（可选）
用 eslint 校验/格式化非样式文件
用 prettier/stylelint 格式化样式文件（采用 stylelint 时，可以校验）
样式方面，优先选择 stylelint vscode 插件作为校验/格式化工具，校验

非样式文件

安装/配置

• 安装 eslint vscode插件
• 格式化方面，安装 npm 包 prettier、eslint-config-prettier、eslint-plugin-prettier ，集成到 eslint 中作为 eslint 的一个 error，让 eslint 去格式化 prettier 规则
• 创建 eslintrc 配置文件
  
• 创建.prettierrc 文件
  

校验/格式化

配置 vscode：

• eslint
• default formatter
• formatOnSave

汇总：

注意

eslint@9 才可以配置 flat config，有些老版的脚手架生成的 eslint 配置中（比如 taro preact ），使用的是 eslint@8，切换到 9 版本 console 会有报错，切换到 8 正常，这种老版的脚手架还是尽量使用他生成的版本，其他 stylelint 测试了升级，没发现异常，但是prettier、stylelint也需要注意

样式文件

样式文件可再 prettier / stylelint 中二选一

stylelint（优先）

采用 stylelint 作为处理样式的工具可以校验+格式化样式文件
小程序中 rpx 这种单位无法被 stylelint 识别，校验时候会报错，可选择以下处理办法

• 接受这种报错。经测试虽然校验会报错，但是不影响其他错误的报错/格式化
• 不使用 stylelint，使用 prettier（仅格式化）

安装/配置

• 安装 npm 包 stylelint 、stylelint-config-standard、stylelint-scss（换成对应 css 拓展）
• 创建 stylelint.config.mjs，配置 extends、plugins、rules
  
• 安装 stylelint vscode 插件

校验

• 配置 vscode settings，配置 stylelint 校验对应文件
  

格式化

配置 vscode codeActionsOnSave（仅对应文件，但是全局也能生效，并且不影响 eslint 对非样式文件的保存格式化）

prettier

prettier 仅能格式化，不能校验

安装/配置

• 安装 prettier vscode插件
• 配置对应文件的 formatOnSave（全局配置了则不需要）、 defaultFormatter 为 prettier