一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情

前言

为什么要配置eslint ?

随着项目规模增大时，很小的错误都可能导致页面异常，不仅影响用户使用，还要耗费大量时间来调试。而原因可能是有个小伙伴手抖多打了一个字符，中途去做其他事情了，导致代码写了一半……我们不能指望肉眼解决所有问题。

所以eslint就是自动检查我们的代码的

使用

安装eslint

在项目中安装eslint 及对应的规则的包

npm i eslint -D

配置eslint的配置文件，执行eslint的命令:

npx eslint --init

• 提供交互界面，用户去选择
• 根据选择去自动下包

步骤： 第一步：选择第三个

第二步：选择第三个

第三步：选择第一个

第四步：选择yes

第五步：两个都选

第六步：选第一个

第七步：选择第2个风格

第八步：选择第一个

第九步：选择yes

第十步：选择yes

配置vscode工具达到ctrl+s自动修复格式错误

1. 在vscode中安装eslint插件。

2. 在vscode设置，让eslint插件显示在状态栏"eslint.alwaysShowStatus": true

3. 配置 设置工作区设置 --> 自动创建.vscode/settings.json文件，内容如下：（不要配置 用户级别！不要配置 用户级别！不要配置 用户级别！）

{
    "eslint.run": "onType",
    "eslint.options": {
      "extensions": [".js", ".vue", ".jsx", ".tsx"]
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

配置完成

ctrl+s格式化检查效果