03 代码规范工具 - udo-bit/naive_admin_pro GitHub Wiki

一般来说一个项目对应的是一个团队,一个团队中可能不止一个开发人员，所以我们不能保证每个人代码风格一致性，所以我们需要通过代码规范工具，来保证大家的代码风格大体上是一致的。

本节课目标

  1. 完成eslint的项目配置
  2. 完成开发工具eslint的配置

好处

  1. 降低开发成本。
  2. 保证代码一致性。
  3. 提升团队工作效率。

安装eslint插件

我们使用eslint来规范我们的代码。

安装

这里我们封装的通用的eslint的规则，我们是vue的项目所以我们直接安装一下我们针对vue的eslint规则即可。 pnpm add eslint @mistjs/eslint-config-vue -D

配置

在根目录创建一个.eslintrc的配置文件

{
  "extends":"@mistjs/eslint-config-vue",
  "rules":{}
}

vscode配置

我们在vscode中配置一下，当我们保存我们的代码的时候自动格式化我们当前页面的代码。 在插件市场搜索eslint，安装一下eslint插件 image.png 然后再使用如下的命令： macos：command + shift + p windows：ctrl + shift+p 输入：setting.json 找到用户配置点击进入 image.png

{
  "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true, // 允许eslint在保存的时候自动格式化
        "source.organizeImports": false,
    },
}

🔺如果之前已经配置过了，那么直接可以忽略即可。

webstorm配置

在webstorm中默认继承了eslint，所以我们只需要简单配置一下即可。 直接在设置的搜索框搜索eslint image.png 然后我们来配置一下eslint image.png 配置完成后点击确定，我们在保存代码的时候，eslint就会自动生效了。