03 %E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83%E5%B7%A5%E5%85%B7

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

本节课目标

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插件 然后再使用如下的命令： macos：command + shift + p windows：ctrl + shift+p 输入：setting.json 找到用户配置点击进入

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

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

webstorm配置

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