1. 做一个极简 UI 库之代码 lint

项目地址:https://github.com/mrxu0/simple-ui

eslint, prettier, stylelint 的配置

这三个规则的配置思路:代码美化用 prettier,逻辑代码用 eslint 校验,样式代码用 stylelint 校验。有跟代码美化冲突的以 prettier 为主

为什么要用这么多呢,因为 eslint 不能解析样式代码,所以需要 stylelint,虽然可以给 eslint 配置 prettier 的规则,但是像 json,css 等文件却没办法美化,所以 prettier 的优势就突出来了,它能够保证不同文件的样式都一致

eslint

// .eslintrc.js
module.exports = {
  root: true,
  plugins: ["prettier"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
  ],
  parser: "vue-eslint-parser",
  rules: {
    "prettier/prettier": ["warn"],
  },
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
};

大概规则解释:使用 eslint,typescript,vue3,prettier 的推荐配置,并且按照从下往上的顺序覆盖其他规则。

parser: 这个用了 vue 的,以此来解析 .vue 的代码, 并且设置 ts 代码解析器为 @typescript-eslint/parser

prettier

这个比较简单,我直接用的 prettier 的推荐配置

stylelint

// .stylelintrc.js
module.exports = {
  extends: [
    "stylelint-config-recess-order",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue",
    "stylelint-config-tailwindcss",
    "stylelint-config-prettier",
  ],
};

大概规则解释(* 替换 stylelint-config):使用 -recess-order 来规定样式文件如何排序,-recommended-{scss, vue} 来提供 .scss 和 .vue 文件的解析能力。-tailwindcss 来规避我使用的 tailwindcss 造成的一些规则冲突,-prettier 来关闭跟 prettier 样式美化的规则

vscode 配置

目标:保证有 lint 错误的时候能够标红提示,保存代码时自动执行 prettier 命令来美化代码

// .vscode/settings.json
{
  // 默认格式化插件:esbenp.prettier-vscode
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true, // 每次保存的时候进行格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false, // 每次保存的时候不进行 eslint 处理
  },
  "stylelint.enable": true, // 启用 stylelint 插件
  "prettier.enable": true, // 启用 prettier 插件
  "css.validate": false, // // 关闭 vscode 默认自带的 css 检查
}

用到的插件

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint", // eslint 校验插件
    "bradlc.vscode-tailwindcss", // tailwindcss 智能提示和检查插件
    "heybourn.headwind", // 能够自动对 tailwindcss 的 class 变量进行排序
    "esbenp.prettier-vscode", // prettier 格式化插件
    "stylelint.vscode-stylelint", // stylelint 校验插件
    "Vue.volar", // vue 代码高亮,智能提示插件
    "ZixuanChen.vitest-explorer", // vitest 插件
  ]
}

这个 id 是这样得来的:

image.png

需要注意的坑

  1. prettieer 和 tsconfig 这俩个配置文件的更改并不能直接生效。需要重启一下 vscode

小技巧

  1. 让多个配置文件折叠显示, 在 .vscode/setting 中添加如下命令
{
  "explorer.fileNesting.patterns": {
    "package.json": "stylelint.config.js, .gitignore, ...",
    "README.md": "CHANGELOG.md, LICENCE"
  },
}

image.png

  1. 快速重启vscode

image.png

  1. 查看 vscode 执行的各种命令,比如查看 git 的执行命令

image.png

husky 和 lint-stated

目标:每次提交的代码都是通过 eslint stylelint 校验的

husky 一个流行的添加 git hooks 的插件,lint-stated 智能的对 git 中暂存的代码执行相应的操作

// .lintstagedrc.js
module.exports = {
  "*.{js,ts,jsx,tsx}": ["eslint --fix"],
  "*.{vue}": ["stylelint --fix", "eslint --fix"],
  "*.{scss, css, less}": ["stylelint --fix", "prettier --write"],
  "*.{json, md}": ["prettier --write"],
};

lint-stated 默认是并行执行的,为了防止冲突,我对不同后缀的文件设置了不同的命令,并且防止同一个文件多次执行相同的命令

vitest 和 vite

/// <reference types="vitest" />
export default defineConfig({
  plugins: [vue(), vueJsx()],
  build: {
    lib: {
      entry: "./src/components/ToastMessage.vue",
      name: "index",
    },
  },
  test: {
    environment: "happy-dom",
  },
});

打包用的 vite,测试工具用的 vitest,这样可以使用相同的配置文件

总结

一个好的项目离不开一整套的前端工程化工具,而常见的代码校验相关的就是 eslint prettier stylelint husky lint-stated。这些工具只要理解了,对于后面的代码维护能够起到极大地作用,而且每个项目都可以用到,一次学习处处应用,好处多多。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容