ESLint

用VS Code为Create React App添加ESLint和Prettier

Posted on 2019-01-15,3 min read

使用ESLintPrettier可以使代码更加规范,整洁同时也便于他人阅读,团队开发更加方便。Create React App是自带ESLint的,但是并没有将文件暴露出来。这篇文章就记录一下如何添加ESLintPrettier

1. 添加ESLint

  1. VS Code中下载ESLint插件

  2. Create React App根目录下创建文件.eslintrc

  3. 向文件中添加以下代码

    {
      "extends": "react-app"
    }
    
  4. 在任意一个.js文件下测试。如下:这时鼠标放在变量x上就会有ESLint提示

    let x = 0;
    // [ESLint] 'x' is assigned a value but never used.[no-unused-vars]
    

    表示这个变量已经定义但是从未使用过。

Create React App默认已经配置好了一些规范,直接按照这些规范书写代码即可。如果想自己修改一些配置,可以在终端输入npm run eject来显示所有的文件和配置信息。注意这个过程是不可逆的。更多关于自定义规则可以通过Create React App官方文档ESLint官方文档来进行查看。

2. 添加Prettier

  1. VS Code中下载Prettier插件

  2. 通过npm下载依赖

    npm i prettier eslint-config-prettier eslint-plugin-prettier -D
    
  3. .eslintrc文件修改如下所示

    {
      "extends": ["react-app", "plugin:prettier/recommended"]
    }
    
  4. 在用户设置的setting json中添加如下代码

    "editor.formatOnSave": true,
    "[javascript]": {
    	"editor.formatOnSave": false
    },
    // 保存时自动修复
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "prettier.disableLanguages": ["js"],
    // 自动保存:在焦点改变时
    "files.autoSave": "onFocusChange",
    

这样设置以后,比如默认的字符串需要使用双引号,如果使用单引号就会报错。这时只需要ctrl+s保存或者页面失去焦点。就会自动修复,将单引号改为双引号。

Html,js,css,md文件都会进行代码格式的检查,一旦出错,都可以通过保存或页面失去焦点进行代码的格式化。

3. 其他项目

如果不是Create React App,也可以通过ESLint --init进行初始化,使用大厂配好的规范,或者自定义都可以。具体的设置内容可以自己查询。

下一篇: ES6