react中引入eslint 环境配置

目标:

 在react项目中配置elint,并启用保存自动化格式功能.

思路:

1. 在项目中安装eslint
2. 用eslint的init指令创建eslint配置文件
3. 设置vscode中的自动保存格式化命令

步骤

1. 终端中输入命令 (安装ts的指令 非必须但是ts格式化格式更高级)

npm i eslint typescript

    2.在项目根目录,运行

npx eslint --init

    3.按照交互提示安装相关插件

        3.1.选择是是否使用TypeScript,选择是(必须要安装过typescript,如果没安装返回第一步)

        3.2.它会自动生成eslint配置文件

       (如果完全不会选择,可以参考下图)

           

       4.设置vscode的自动保存格式化

        4.1在扩展中下载扩展ESLint

        4.2在设置中搜索eslint然后勾选上Eslint.Alwas Show Status

        

        4.3在项目根目录下,补充配置文件:vscode\settings.json并输入以下代码保存

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

拓展-环境配置中引入扩展prettier-now

原因:

        eslint并不能深入到jsx代码中来格式化，所以需要额外的工具。

步骤:

1. 安装vscode插件prettier-now
2. 补充配置

1.安装vscode插件prettier-now

vscode扩展中有两个叫prettier的扩展,一定要注意下载prettier-now版本的

 2.补充代码

在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"
  }
}