2022 - eslint + prettier + stylelint 环境搭建踩坑指南

2,549 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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 的规则

eslint-plugin-vue@latest

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-order

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进行格式化。