Eslint之React配置

React项目配置Eslint

1.初始化React项目 
crate-react-app my-shopping
初始化后的目录结构如下：

2.安装Eslint
 npm install eslint --save-dev
 安装完成后再当前项目下执行如下命令
 npx eslint --init
 执行该命令后进入问答模式

完成后会增加一个.eslintrc.js 如下图所示:

注意：
1.我们发现上图文件 eslintrc.js 文件中第一行有报错，我们再添加一个 .eslintignore 
文件来修复这个问题，把.eslintrc.js 添加到忽略文件即可
2.不要把module.exports改成export defalut 会导致配置文件失效！！！！
.eslintignore的代码文件如下:

.eslintrc.js
build/*.js
coverage
.vscode/*
public/*

配置Prettier

1.安装prettier
npm install --save-dev --save-exact  prettier
2.利用命令创建 .prettierrc.js
echo {}>.prettierrc.js
执行该命令后会生成文件如下图所示：

3.如下代码放置在.prettierrc.js文件中

module.exports = {
    //指定一个制表符等于多少个空格。默认为 2。
    useTabs: true,
    //指定箭头函数参数是否永远使用圆括号。可以是 “always”、“avoid”、或 “as-needed”。默认为 “always”。
    arrowParens: 'avoid',
    //指定每行代码的最大宽度。默认为 80。
    printWidth: 120,
    //指定一个制表符等于多少个空格。默认为 2。
    tabWidth: 2,
    // 指定是否在语句末尾添加分号。默认为 true。
    semi: false,
    //指定是否使用单引号而不是双引号。默认为 false。
    singleQuote: true,

    //指定是否在对象字面量中的括号之间添加空格。默认为 true。
    bracketSpacing: true,
    // 首次出现在1.15.0中
    // 由于历史原因，在文本文件中存在两种常用的行结尾的风格。那是\n（或LF换行）和\r\n（或CRLF用于回车+换行）。
    // 前者在 Linux 和 macOS 上很常见，而后者在 Windows 上很普遍。可以在维基百科上找到解释其原因的一些细节。
    // 默认情况下，Prettier 会保留给定文件已使用的行尾的风格。它还将一个文件中的混合行结尾转换为它在第一行末尾找到的结尾。
    // 当人们在不同操作系统上协作项目时，很容易在中央 git 存储库中找到混合行结尾。
    // Windows 用户也可能会意外地将已提交文件中的行结尾更改 LF 为 CRLF。
    // 这样做会产生很大的影响 git diff，如果在代码审查过程中没有注意到，那么file（git blame）的所有逐行历史都会丢失。
    // 如果你想确保你的 git 存储库在 Prettier 所涵盖的文件中只包含 Linux 风格的行结尾：
    // 1.将 endOfLine 选项设置为 lf
    // 2.配置一个 pre-commit 钩子，运行 Prettier
    // 3.配置 Prettier 在CI管道中运行 --check flag
    // 4.Windows用户在使用您的仓库之前，运行 git config core.autocrlf false，以便git 在 checkout 时不会转换 LF 为 CRLF。或者，您可以添加 * text=auto eol=lf 到 repo 的.gitattributes 文件来实现此目的。

    // 所有操作系统中的所有现代文本编辑器都能够在使用 \n（LF）时正确显示行结尾。但是，旧版本的 Windows 记事本会直观地将这些行压缩成一行。
    // 有效选项：

    // "auto" - 维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）

    // "lf"- Line Feed only（\n），在 Linux 和 macOS 以及 git repos 内部很常见

    // "crlf"- 回车符+换行符（\r\n），在 Windows 上很常见

    // "cr"- 仅限回车符（\r），很少使用
    endOfLine: 'auto',
    //指定是否在数组和对象字面量的末尾添加逗号。可能的值是 “none”、“es5”（在 ES5 中有效）和 “all”。默认为 “es5”。
    trailingComma: 'none'
}

4.在VsCode中prettier插件如下图所示

5.安装eslint-config-prettier 解决prettier和eslint之间的冲突
 npm install eslint-config-prettier

6.生成.vscode目录和settings.json文件如下图所示操作

7.把如下代码放置在.vscode下的settings.json文件中

{
	// eslint主要功能设定规范,捕获不规范的错误等 美化代码或者格式化代码功能交给prettier
	"eslint.format.enable": false,
	//打开保存格式化功能(保存代码的时候自动格式化)
	"editor.formatOnSave": true,
	//使用 prettier  作为默认格式化程序
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

8.在vscode中安装eslint插件

eslint代码规范和prettier美化代码配置完毕！！！！