前言

随着项目的不断增加,很小的错误都可能导致页面异常,不仅影响用户使用,还要浪费大量时间来调试,所以使用代码检查工具可以让程序员在编码的过程中发现问题而不是在执行的过程中。

Eslint的介绍

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装

Eslint的配置

第一步: 下包

npm i -D eslint

第二步: 在项目根目录下，运行npx eslint --init 按交互提示安装相关插件

第三步: 提示你的项目使用什么样的模块

第四步: 提示你的项目使用什么框架

第五步: 提示是否使用typescript

第六步: 提示在哪个环境运行浏览器还是node

第七步: 定义代码风格

第八步: 定义风格指南

第九步: 配置文件格式

第十步: 降级

第十一步: 是否使用npm安装

在vscode设置自动保存格式化

在项目根目录下，补充配置文件：.vscode\settings.json，其内容如下：

{
    "eslint.enable": true,
        "eslint.run": "onType",
        "eslint.options": {
            "extensions": [
                ".js",
                ".vue",
                ".jsx",
                ".tsx"
            ]
        },
        "eslint.alwaysShowStatus": true
}

到此eslint 设置便完成不过eslint并不能深入到jsx代码中来格式化，所以需要额外的工具。

配置-引入 prettier-now

第一步 :

安装vscode插件prettier-now

第二步: 补充配置

.vscode\settings.json中

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

  // 编辑器设置 - 保存时做格式化
  "editor.formatOnSave": true,
  // 编辑器设置 - 默认采用prettier-now做格式化
  // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now",

  // 控制缩进
  "prettier.useTabs": false, // 缩进不使用tab，使用空格 
  "prettier.tabWidth": 2, // 缩进字节数

  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,

  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,
  "prettier.bracketSpacing": false, // 去掉数组内部前后的空格
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 80, // 每行超过80列就换行

  // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

当你保存Ctrl+S格式化时 eslint与这个项目配置有问题时可以在用户区看一下你是否配置了

如果报'no-use-before-define' 可以在.eslintrc.js的rules中配置 'no-use-before-define': 'off'

Eslint在React中的配置,从此实现团队的代码规范

前言

Eslint的介绍

Eslint的配置

在vscode设置自动保存格式化

配置-引入 prettier-now