携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情
eslint + prettier + stylelint 环境搭建踩坑指南
本文通过个人实践,解决依赖包版本问题,来完成代码规范开发环境搭建。
首先创建一个项目,选择 vue + ts
pnpm create vite
eslint
添加eslint
pnpm add -D eslint
生成 eslint 配置文件
npx eslint --init
选择如下
- To check syntax, find problems, and enforce code style (强制执行代码风格)
- JavaScript modules
- Vue.js
- typescript yes
- Browser 和 Node
- Use a popular style guide
- Airbnb
- JavaScript
- No
接着把最后一个问题上面的所有依赖拷贝下来,使用 pnpm 安装
pnpm add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
这里把 .eslintrc.js 改一下,我们需要 vue3 的规则
plugin:vue/essential // ----- 注释
plugin:vue/vue3-recommended // vue3 的规则 ---- 添加
配置 .eslintignore
index.html
*.d.ts
node_modules
使用 eslint-config-prettier 解决 prettier 与 eslint 的冲突
eslint-plugin-prettier:使用 eslint-plugin-prettier 将 prettier 作为 eslint 规则运行
pnpm add -D eslint-plugin-prettier prettier
配置 .eslintrc.js
"extends": [
"prettier", // +++
],
"rules": {
"prettier/prettier": "error"
}
eslint-plugin-prettier 推荐配置
This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. (If another active ESLint rule disagrees with prettier about how code should be formatted, it will be impossible to avoid lint errors.) You can use eslint-config-prettier to disable all formatting-related ESLint rules.
This plugin ships with a plugin:prettier/recommended config that sets up both the plugin and eslint-config-prettier in one go.
这段话大概的意思是这样的
如果另一个有效的 eslint 规则不同意prettier代码应该如何格式化,则无法避免 lint 错误 (也就是冲突错误),您可以使用 eslint-config-prettier 禁用所有与格式化相关的 eslint 规则。
该插件附带一个plugin:prettier/recommended配置,可以一次性设置插件 eslint-config-prettier 。
也就是通过 eslint-config-prettier 关闭与 prettier 格式化冲突的规则
pnpm add -D eslint-config-prettier
配置 .eslintrc.js
{
"extends": [
// ...
"prettier"
"plugin:prettier/recommended" // 放最后
]
}
prettier
prettier 已经在上面安装过了
.prettierrc
{
"trailingComma": "none",
"printWidth": 100,
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"endOfLine": "auto",
"htmlWhitespaceSensitivity": "ignore",
"overrides": [
{
"files": "*.html",
"options": {
"parser": "html"
}
}
]
}
stylelint
添加 stylelint
pnpm add -D stylelint stylelint-config-rational-order stylelint-config-recommended stylelint-order
使用 stylelint-config-prettier 解决 prettier 与 stylelint 的冲突
pnpm add -D stylelint-config-prettier
配置 .stylelintrc
{
"extends": [
"stylelint-config-recommended",
"stylelint-config-rational-order",
"stylelint-config-prettier" // stylelint-config-prettier 放最后一项
],
"ignoreFiles": ["**/*.js", "**/*.ts", "dist/*", "node_modules/*"]
}
解决 stylelint^14.x 对于 vue3 不支持
vscode 使用快捷键 ctrl+shift+p 执行 Reload Windows,打开 HelloWorld.vue 会发现显示这个错误
Vue3 显示 Stylelint: Unknown word (CssSyntaxError)
原因是 stylelint@14 不支持 vue3 ,降级到 stylelint@13 的最新版本。
pnpm add -D stylelint@^13.x
安装完成后会发现,stylelint-config-recommended 和 stylelint-order 要求的 stylelint 版本为 ^14 以上
├─┬ stylelint-config-recommended
│ └── ✕ unmet peer stylelint@^14.8.0: found 13.13.1
└─┬ stylelint-order
└── ✕ unmet peer stylelint@^14.0.0: found 13.13.1
所以我们分别到这两个仓库去看看历史版本支持问题
stylelint-config-recommended
我们看到 stylelint-config-recommended 的 release:
-
6.0.0
- Removed: stylelint less than 14.0.0 from peer dependencies.(删除低于 stylelint14 对等依赖)
- Removed: function-calc-no-invalid rule.
- Added: custom-property-no-missing-var-function rule.
-
5.0.0
- Removed: stylelint less than 13.13.0 from peer dependencies.(删除低于 stylelint13 对等依赖)
- Added: no-invalid-position-at-import-rule rule.
- Added: no-irregular-whitespace rule.
- Fixed: selector-type-no-unknown for custom elements.
上面两个版本第一项的意思就是依赖需要支持 大于 stylelint@13/14 的版本
于是我们安装 5.0.0 这个版本
pnpm add -D stylelint-config-recommended@^5.0.0
会自动覆盖原有下载的依赖版本
stylelint-order
-
5.0.0
- xxx
- xxx
- Added support for Stylelint 14.
-
4.1.0
- xxx
- xxx
看到 5.0.0 版本添加了支持 stylelint14,那就说明版本 4 还没支持,所以我们安装它。
pnpm add -D stylelint-order@^4.1.0
其实这也是开发的一种能力,查看报错或者提醒,或者通过 issue 或者一些博客来查看是否版本问题,进行解决。
最后
webstorm2022.2.3已经支持vue3,stylelint的问题也已经解决了,所以能够正常根据项目中eslint、prettier、stylelint
进行格式化。