eslint+prettier+stylelint 集成全流程

小凉丶

已于 2023-05-18 14:17:03 修改

阅读量1.5k

点赞数 4

分类专栏： help 文章标签： vue.js 前端 javascript

于 2022-09-26 17:46:54 首次发布

本文链接：https://blog.csdn.net/weixin_44484471/article/details/127057790

版权

help 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

eslint+prettier+stylelint 集成

前提准备

既然是要在 vscode 上使用, 就难免要安装对应的插件来获得最好的使用体验了

Error Lens 插件

这东西谁用谁知道, 比起不起眼的红色波浪线, 问题还要鼠标移到上面或者打开控制台信息查看, 这插件直接将问题甩到你脸上, 和 eslint,stylelint 搭配使用都不需要看控制台信息 强烈推荐

ESLint, ESLint Chinese Rules

前面的是官方推荐安装,集成eslint的很多功能,属于必装项, 后面则是属于第三方, 能将错误信息中文化,并且跳转问题时会跳到 eslint 的中文网, 属于可装可不装

Prettier - Code formatter

配置代码风格的插件, 属于 必装, 用习惯会很爽, 乱糟糟的代码一键美化, 每个括号都能轻易找到对应的地方, 代码赏心悦目

Stylelint

与 eslint 相同, 属于官方推荐, 必装, 和 eslint 差不多,都集成了很多功能

至于 volar 用到 vue 早就装了, 就不过多解释

插件配置

插件安装好后,需要写一些配置

打开 settings.json, 如果你不知道这是什么, 那么请打开 设置, 选择右上角一个反箭头加一张纸 的图标

加入这些内容

"prettier.printWidth": 100,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.semi": true,
"prettier.singleQuote": false,
"prettier.quoteProps": "as-needed",
"prettier.trailingComma": "es5",
"prettier.bracketSpacing": true,
"prettier.arrowParens": "avoid",
"prettier.vueIndentScriptAndStyle": false,
"prettier.proseWrap": "never",
"prettier.endOfLine": "auto",
"prettier.htmlWhitespaceSensitivity": "ignore",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"]

prettier 的配置主要是设置默认的代码风格规范(在没有.prettierrc的情况下), 配置可以按照自己需求修改, 如果不知道规则可以查看集成部分, stylelint 主要是设置插件生效的文件类型(默认的太少了[css,less,postcss])

其他不影响集成的配置项视自身情况添加即可, 到这里, 你的前期准备工作就完成了, 可以开始正式集成

prettier 集成

这里的集成是指统一当前项目的代码风格, 主要使用 .prettierrc.json 来配置

.prettierrc.json 的优先级是要大于 settings.json 的配置项, 所以 settings.json 的配置项会失效要注意

操作

在当前项目根目录新建 .prettierrc.json
在 .prettierrc.json 添加以下内容

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "never",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "ignore"
}

其实就是和 settings.json 里面一样的配置, 写在 .prettierrc.json 是为了 eslint和 stylelint 的集成

具体的规则,可以查看 prettier 插件的 细节页 并滑动到 Settings 一栏, 就可以看到所有的配置项了, 搭配 prettier documentation ,并使用中文翻译页面, 食用更佳

eslint 集成

我会分成 2 部分来说明过程, 参考文档, 操作流程

参考文档

eslint中文网: https://cn.eslint.org/docs/user-guide/getting-started

prettier中文网: https://www.prettier.cn/docs/install.html#eslint-and-other-linters

禁用eslint与prettier冲突的规则 : https://github.com/prettier/eslint-config-prettier#installation

将prettier作为eslint的规则使用 : https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

vue规则文档: https://eslint.vuejs.org/rules/

node规则文档: https://github.com/eslint-community/eslint-plugin-n#readme

promise规则文档: https://github.com/xjamundx/eslint-plugin-promise

其实每个文档之间都有关联, 我也是这么一个个找下来的

操作流程

打开项目根目录的的终端 cmd
输入 yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D
下载完成后输入 yarn run eslint --init

如果这行语句有报错, 不妨使用管理员启动的cmd, 来运行

输入后你会看到

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

意思是选择 eslint 功能, 选择项: 只检查语法, 检查语法并发现问题, 检查语法、发现问题和执行代码样式, 为了修复代码的功能, 选择 第3个

选择后

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

意思是你当前项目使用的是什么开发模式, 选择项: modules导入导出, CommonJS导入导出, 普通写法, 因为是vite,vue这里选择 第1个

选择后

? Which framework does your project use? ...
  React
> Vue.js
  None of these

字面意思,选择项目框架, 第2个

选择后

? Does your project use TypeScript? » No / Yes

是否使用ts语法, 这里选择 No

选择后

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node

意思是选择运行环境, 添加默认变量的验证, 多选, 因为没有用到 node语法, 所以选择Browser即可

选择后

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

意思是选择项目的代码规范, 选择项: 1:使用一个流行的规则, 说明白就是大家都在用的规则,是一种公认的标准, 2:使用自己的规则, 直接选择 第一个

选择后

? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

在上面选择 第一个后, 选择流行规则, 选择第二个, 是标准规则

选择后

? What format do you want your config file to be in? ...
  JavaScript
  YAML
> JSON

选择配置文件的类型, 都可以, 我这里选择 第3个

选择后

Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0
? Would you like to install them now? » No / Yes

配置完成后,会自动检查当前配置的依赖, Yes 安装即可

选择后

? Which package manager do you want to use? ...
  npm
> yarn
  pnpm

选择下载的包管理器, 我这里是 yarn 所以选择 第2个

操作完成后, 就会进入下载, 下载结束你就会看见根目录多了一个.eslintrc.json文件
打开 .eslintrc.json , 在 extends 中添加 "plugin:prettier/recommended"

"extends": ["plugin:vue/vue3-essential", "standard", "plugin:prettier/recommended"]

到这里其实 eslint + prettier 集成就已经完成了, 但直接使用标准规则,难免会影响实际开发的体验,所以需要关闭一些

在 rules 中添加一些规则

"rules": {
  //关闭 !== 和 === 的 强制使用
  "eqeqeq": "off",
  //关闭 注释必须带空格
  "spaced-comment": "off",
  //启动三元,短路
  "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
  //定义变量使用情况
  "no-unused-vars": [
    "error",
    { "vars": "all", "args": "all", "ignoreRestSiblings": true, "argsIgnorePattern": "^_" }
  ],
  //关闭 驼峰命名
  "camelcase": "off",
  //关闭 cb callback 函数参数检查
  "n/no-callback-literal": "off",
  //关闭 vue3 文件名必须多单词
  "vue/multi-word-component-names": "off"
},

如果有影响开发的规则, 也可以自己关闭, 具体配置项可以查看 参考文档

stylelint 集成

参考文档

stylelint中文网: https://stylelint.bootcss.com/

stylelint插件集合: https://github.com/stylelint/awesome-stylelint#plugins

stylelint-prettier插件: https://github.com/prettier/stylelint-prettier

自定义样式顺序: https://github.com/hudochenkov/stylelint-order

预设样式顺序: https://github.com/kutsan/stylelint-config-clean-order

vue配置: https://github.com/ota-meshi/stylelint-config-standard-vue

stylelint-config-prettier-scss:https://github.com/prettier/stylelint-config-prettier-scss

操作流程

在当前项目根目录,打开 cmd
输入 yarn add postcss postcss-html stylelint stylelint-order stylelint-config-clean-order prettier stylelint-prettier stylelint-config-standard-vue stylelint-config-standard-scss stylelint-config-prettier-scss -D

依赖	作用
postcss	PostCSS 是使用 JS 插件转换样式的工具
postcss-html	eslint vue 依赖项
stylelint	样式规范
stylelint-order	样式自定义排序
stylelint-config-clean-order	样式预设顺序(含空行分组)
prettier	代码美化
stylelint-prettier	stylelint 集成 prettier
stylelint-config-standard-vue	Stylelint 的标准可共享 Vue 配置
stylelint-config-standard-scss	扩展 scss 样式规范(css 和 scss)
stylelint-config-prettier-scss	禁用有关 prettier 配置的规则(css 和 scss)

如果只是想要 css 版本, 直接把 -scss 或 /scss 去掉即可, json配置里面也是一样, 如果是其他样式配置, 就需要自己找找, 我这边就不踩坑了

在根目录添加 .stylelintrc.json 文件

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-standard-vue/scss",
    "stylelint-config-clean-order",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier-scss"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "no-empty-source": null,
    "no-descending-specificity": null,
    "function-url-quotes": [
      "always",
      {
        "except": ["empty"]
      }
    ],
    "selector-class-pattern": "^([a-z0-9]+[A-Z]*)((-|_){0,2}[a-z0-9]+[A-Z]*)*$",
    "scss/double-slash-comment-whitespace-inside": "never",
    "max-nesting-depth": 5,
    "selector-max-compound-selectors": 5,
    "selector-no-vendor-prefix": [
      true,
      {
        "ignoreSelectors": ["/-webkit-.*/", "/-moz-.*/"]
      }
    ]
  },
  "ignoreFiles": ["**/*.min.css", "**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"]
}

注意的是 extends 的顺序不能更改, 否则会出问题. 作用顺序是基础规则(scss 和 css) -> vue 基础(scss 和 css) -> 样式排序(禁用部分规则) -> prettier 集成(禁用相关 css 规则) -> prettier 关闭相关规则(scss 和 css)

注意事项

请注意.prettierrc.json 里面规则修改后需要重新启动项目或者重新打开 vscode 工具, 因为.prettierrc.json里面的内容不会实时写入eslint规则或stylelint规则里面, 修改需要重新启动

请注意settings.json 里面的 prettier 规则并不会写到 eslint 和 stylelint 规则里面, 所以要集成的话必须有 .prettierrc.json

全局修复

eslint 和 stylelint 都支持全局修复 --fix, 写好命令行, 就可以指定文件夹或文件去批量修复, 命令行内容较多,这里就提供 2 个基础的命令行

eslint --ext .js,.vue --fix src/

stylelint src/**/*.{vue,css,scss} --fix

上面二个命令行可以手动调用, yarn run + 命令行, 也可以写入 package.json 的 scripts 中

单个文件修复的话, 可以打开要修复的文件使用 ctrl+shift+p 快捷键, 或者头部菜单的查看 -> 命令面板, 然后输入 fix 找到下面 2 个选择项

Stylelint: Fix all auto-fixable Problems

Eslint : Fix all auto-fixable Problems

回车即可, 注意这 2 个选择项要装 eslint和stylelint 插件

温馨提示: 如果使用的是包管理器 pnpm , 要注意package.json 的脚本是什么包管理器在运行, 因为 pnpm 和 npm/yarn 不一样 , 所以如果你用的是 pnpm 就不能直接 npm或yarn run (eslint或stylelint脚本)

如果包管理器不一致, 到 settings.json 中查看 eslint.packageManager 或 stylelint.packageManager 配置项是否已经设置了其他包管理器, 如果有可以修改为 pnpm 或删除直接使用当前使用包管理器