随着前端工程化的发展,前端代码规范也显得越来越重要,所以作为一个前端对于这方面还是需要有一定的了解的。本篇文章将带大家使用ESLint+Prettier+Stylelint+Husky从零搭建一个Vite+Vue3项目。

ESlint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误,它的使用其实很简单

首先安装 ESLint

pnpm i eslint -D

然后进行初始化

npx eslint --init

你会发现出现一些选择项

image.png

因为我们用的是 pnpm,所有那些工具没有安装,我们需要安装一下这些插件

pnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

在package.json的script中添加命令lint:script

  "scripts": {
    "lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"
  },

直接运行pnpm run lint:script会报错,我们需要将.eslintrc.json文件下的"parser": "@typescript-eslint/parser"

移动到parserOptions中,然后新增parser: vue-eslint-parser,因为eslint-plugin-vue规定如果用了其它解析器则需要将其移动到parseOptions下才不会发生冲突,如下

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

最后执行

 pnpm lint:script

即可对代码进行校验。有了ESLint其实还不够,我们还需要将Prettier集成到ESLint中

集成 Prettier

Prettier 主要是对代码做格式化,虽然ESLint也可以,但是Prettier比较专业,所以 ESLint 经常结合 Prettier 一起使用。接下来看一下如何集成Prettier

安装

pnpm i prettier -D

根目录新建.prettierrc.cjs(因为 vite 默认使用了"type": "module",,所以这里要以cjs后缀结尾,当然如果没有设置可以直接以.js结尾)

module.exports = {
    printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
    tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
    useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
    singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
    semi: true, // 行尾是否使用分号，默认为true
    trailingComma: "none", // 是否使用尾逗号
    bracketSpacing: true // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
}

具体参数可以点击Options · Prettier[2]进行查看

接下来就是将Prettier集成到ESLint中

安装eslint-config-prettier(覆盖 eslint 本身规则)和eslint-plugin-prettier(Prettier 来接管 eslint --fix 即修复代码的能力)

pnpm i eslint-config-prettier eslint-plugin-prettier -D

配置.eslintrc.json(带有注释的部分就是新加的)

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        // 1. 接入 prettier 的规则
        "prettier",
        "plugin:prettier/recommended"
    ],
    "overrides": [],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser"
    },
    "plugins": [
        "vue",
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        // 3. 开启 prettier 自动修复的功能
        "prettier/prettier": "error",
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

接下来执行

pnpm run lint:script

即可完成 ESLint 规则校验检查以及 Prettier 的自动修复

保存自动格式化

我们通常希望在保存的时候自动执行lint:script,这里只需要对VSCode进行一个配置即可

image.png

默认格式化选择Prettier,并将保存自动格式化勾选,然后右键选择"使用...格式化文档",设置默认为Prettier即可实现保存自动格式化文档

image.png

image.png

在 vite 中引入 ESlint 插件

在 vite 中引入 ESlint 插件原因是因为有些用户不是使用 VSCode 进行开发的,所以我们需要在开发编译阶段就给出提示,引入方式如下

安装vite-plugin-eslint

pnpm i vite-plugin-eslint -D

在vite.config.ts使用

// vite.config.ts
import viteEslint from 'vite-plugin-eslint';

// 具体配置
{
  plugins: [
    // 省略其它插件
    viteEslint(),
  ]
}

此时启动项目如果有 ESLint 错误便可在窗口中提现出来了

image.png

Stylelint 样式规范工具

Stylelint 其实就是规范我们的样式文件的,比如CSS,Less,Scss等

首先安装对应工具,这里以 scss 为例子

pnpm i stylelint stylelint-prettier stylelint-config-standard postcss-scss postcss-html stylelint-config-recommended-vue stylelint-config-recess-order -D

然后新建.stylelintrc.cjs,如果没有设置"type": "module"可以以.js结尾

module.exports = {
    // 注册 stylelint 的 prettier 插件
    plugins: ['stylelint-prettier'],
    // 继承一系列规则集合
    extends: [
        // standard 规则集合
        'stylelint-config-standard',
        // standard 规则集合的 scss 版本
        'stylelint-config-standard-scss',
        // 样式属性顺序规则
        'stylelint-config-recess-order',
        // 接入 Prettier 规则
        'stylelint-config-prettier',
        'stylelint-prettier/recommended'
    ],
    // 配置 rules
    rules: {
        // 开启 Prettier 自动格式化功能
        'prettier/prettier': true
    }
}

具体配置可以查阅官网Home | Stylelint[3]

然后在package.json增加script配置

{
  "scripts": {
    // stylelint 命令
    "lint:style": "stylelint --fix \"src/**/*.{css,scss}\""
  }
}

执行pnpm run lint:style即可对样式进行格式化

同样的我们可以在 VSCode 中安装Stylelint让我们在开发阶段就能看到错误

image.png

vite 集成 Stylelint

和 ESLint 一样,Stylelint 也可以集成在 Vite 中,因为我们不能保证所有开发者都用VSCode,所以我们需要让我们可以让它在控制台显示错误信息

vite2 安装@amatlash/vite-plugin-stylelint,vite3 安装 vite-plugin-stylelint

pnpm i vite-plugin-stylelint -D

在vite.config.ts中

import viteStylelint from 'vite-plugin-stylelint';
{
  plugins: [
    viteStylelint(),
  ]
}

最后在package.json设置一个lint集合命令

"scripts": {
        "lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./",
        "lint:style": "stylelint --fix \"src/**/*.{css,scss}\"",
        "lint": "npm run lint:script && npm run lint:style",
    }

到这里我们就已经完成了对ESLint+Prettier+Stylelint的配置了,接下来要做的就是让不符合规则的代码不允许commit,这里可以使用哈士奇(Husky)进行拦截

Husky

首先安装 husky

pnpm i husky -D

script 脚本配置项目启动执行命令 husky install

 "scripts": {
        "prepare": "husky install"
    },

添加 husky 钩子生成,如果提示你.husky文件不存在,可以先执行下pnpn i或者npx husky install

npx husky add .husky/pre-commit "npm run lint"

执行完毕之后就会看到.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

配置 lint-staged

当我们执行git commit的时候就会先执行npm run lint,只有lint通过后才会提交,但是这样每次提交都要全量检查文件有点太费时,如果我们想让它只检查提交的文件可以使用lint-staged这个插件

pnpm i -D lint-staged

然后在package.json中配置

{
  "lint-staged": {
    "**/*.{js,jsx,tsx,ts,vue}": [
      "npm run lint:script",
      "git add ."
    ],
    "**/*.{scss}": [
      "npm run lint:style",
      "git add ."
    ]
  }
}

然后将pre-commit中的npm run lint修改为npx --no -- lint-staged即可

commit 提交信息规范

除了代码规范以外,代码的提交信息我们也需要进行一个规范,这里我们可以直接使用commitlint以及它的工具库

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

新建.commitlintrc.cjs

module.exports = {
    extends: ["@commitlint/config-conventional"]
};

@commitlint/config-conventional 规定的 commit 信息一般由两个部分: type 和 subject 组成，结构为<type>: <subject>,如新增功能feat: add fun

type 如下

• build 影响项目构建或依赖项修改
• chore 其他修改
• ci 持续集成相关文件修改
• docs 文档修改
• feat 添加新功能
• fix 修复 bug
• perf 更改代码，以提高性能
• refactor 代码重构
• revert 恢复上一次提交
• style 代码格式修改
• test 测试用例新增、修改

将commitlint集成到husky中

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

然后.husky下就多了一个commit-msg文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint -e

我们试着提交一个不符合规范的信息就会发现控制台拦截了我们的commit

image.png

到这里项目集成代码规范工具已经完成了,其实这种配置类型的东西大家只需要配置一次就能复用到其它项目中了,没必要太深入的研究,需要的时候看一下就行了。大家在配置的过程中难免会遇到一些问题,欢迎大家在评论区留言一起解决,如果这篇文章对你有所帮助就点个赞吧

git地址

本篇文章代码已经提交到v3-project-template[4]了,需要的小伙伴可以直接拉取

参考资料

[1]

https://rank.juejin.cn/rank/2022/writer/3193422001474199: https://rank.juejin.cn/rank/2022/writer/3193422001474199

[2]

https://www.prettier.cn/docs/options.html: https://www.prettier.cn/docs/options.html

[3]

https://stylelint.io/: https://stylelint.io/

[4]

https://github.com/qddidi/v3-project-template: https://github.com/qddidi/v3-project-template