持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

前言

最近在学习react的知识，我是使用create-react-app创建的项目，默认是没有eslint校验的，然后想加上eslint校验，因为示例代码每行后面都有一个分号，以及使用双引号等，跟之前的习惯相左，所以通过eslint校验并格式化代码。

配置eslint校验

首先要在当前项目安装eslint

npm i eslint -D

yarn add eslint -D

pnpm add -D eslint

我安装的版本是^8.0.1。

然后在当前目录下初始化eslint配置

// 通过npx执行eslint
npx eslint -init

// 也可以通过下面命令
node ./node_modules/.bin/eslint --init

都是去bin目录执行eslint的可执行文件

然后就会问你的eslint的配置选项

选项如下：

1.你打算使用eslint的目的，仅仅是检查语法，还是找到问题，并格式化代码？

2.你当前的项目使用的模块化语法，是es6的import/export 还是nodejs的commonjs，还是没有使用？

3.你使用的框架，是react还是vue，还是都没有使用？

4.是否有使用ts？

5.你的代码运行环境，是在浏览器，还是在node？

6.你喜欢如何定义你项目的校验？ 使用一个热门的校验库，还是通过回答问题来定义校验库？

如果选择热门的校验库，可以选Airbnb，Standard等等。

我用的比较多的是Standard，Airbnb会校验更严，慎用。

7.想以什么格式把eslint配置存下来？

然后等待安装依赖即可。

会在根目录生成.eslintrc.js

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest'
  },
  plugins: [
    'react'
  ],
  rules: {
  }
}

如果你是使用的vscode，建议安装eslint插件，会提示代码的错误和警告，以及可以格式化代码。

如果要格式化代码，需要在vscode的settings.json开始eslint校验

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

接下来就可以愉快敲代码了。