首先,我们使用官方提供的脚手架 create-react-app 来创建一个项目:
npx create-react-app eslint-prettier-react-demo/
cd eslint-prettier-react-demo/
Eslint 是一个可以检验代码,并给出报告的工具。它的目标是保证代码的一致性,避免错误。Eslint 为我们提供了 ECMAScript/JavaScript 规范的代码校验,我们可以根据个人/团队的代码风格进行配置,也可以使用开源的配置方案,本文会采用 eslint-config-airbnb 来配置。
Eslint 的强大得益于它活跃的开源社区,以及灵活的插件机制。本文中,我们需要去配置一个 React 项目,就可以去选择一些开源社区合适的插件,来帮助我们完成目标。
接下来,我们安装这些依赖:
npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
下面,让我们需要根据 Eslint 的文档来配置这些插件。在控制台运行下面命令:
./node_modules/.bin/eslint --init
我们可以根据项目的需求,来选则相应的配置。执行完毕之后可以看到项目的根目录多了一个 .eslintrc.js 文件。
Eslint 支持多种格式的配置文件,优先级如下:
我们使用官方推荐的 .eslintrc.js 格式就好。
接下来,让我们使用喜欢的编辑器来打开这个文件,为了便于理解,我增加了一些注释:
module.exports = {
// 为我们提供运行环境,一个环境定义了一组预定义的全局变量
"env": {
"browser": true,
"es6": true
},
// 一个配置文件可以被基础配置中的已启用的规则继承。
"extends": [
"airbnb"
],
// 自定义全局变量
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"_": true,
"$": true,
},
// ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器
// "parser": "@typescript-eslint/parser",
// 配置解析器支持的语法
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
// ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。
// 在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
"plugins": [
"react",
// "@typescript-eslint"
],
// ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:
// "off" 或 0 - 关闭规则
// "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
// "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
"rules": {
semi: 0,
'no-unused-vars': [
1,
{
vars: 'all',
args: 'after-used',
ignoreRestSiblings: true,
varsIgnorePattern: '^_',
argsIgnorePattern: '^_|^err|^ev' // _xxx, err, error, ev, event
}
],
'no-useless-escape': 2,
}
};
我们可以借助 Eslint 来提高我们编码的质量,但是却无法保证统一代码风格。一个统一的代码风格对于团队来说是很有价值的,所以为了达到目的,我们可以选择使用 Prettier 在保存和提交代码的时候,将代码修改成统一的风格。这样做同时也降低了 Code Review 的成本。它不会代替 Eslint,所以需要和 Eslint 搭配使用。
1、 安装依赖
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
2、 修改 Exlint 配置,打开 .eslintrc.js 文件,在扩展中增加 "plugin:prettier/recommended" :
"extends": [
"airbnb",
"plugin:prettier/recommended"
]
3、 增加 prettier 配置文件,在根目录创建 .prettierrc.js :
module.exports = {
"printWidth": 120, //一行的字符数,如果超过会进行换行,默认为80
"tabWidth": 2, //一个tab代表几个空格数,默认为2
}
如果,我们想要使用 git 提交代码时,通过 prettier 来优化代码,还需要借助一些工具来完成。
1、 安装依赖
npm i lint-staged husky -D
2、 增加配置
// package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/*.{js,jsx,mjs,ts,tsx}": [
"node_modules/.bin/prettier --write",
"node_modules/.bin/eslint --fix",
"git add"
],
"src/*.{css,scss,less,json,html,md,markdown}": [
"node_modules/.bin/prettier --write",
"git add"
]
}
...
}
3、 测试 commit 命令
这是我们尝试增加一个组件,并提交代码。这时发现提交不了,有报错:
这个是因为 prettier 的默认规则,和 airbnb 规则不一致导致的。
这里可以参考git示例中的配置,调整一下 .eslintrc.js 文件即可。
这时候再提交代码就会看到:
1、 在 VS Code 商店中寻找并安装插件 ESlint,Prettier
2、 编辑 settings.json,通过下面路径,可以找到相应的配置文件:
然后增加如下参数:
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"eslint.autoFixOnSave": true,
"eslint.enable": true,
这样当我们在保存文件的时候,就会自动优化文件格式了。到这里,整个项目的搭建,以及编辑器的设置就完成了!
Javascript 是一门弱类型语言,所以语法检查变得尤为重要。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。 这篇文章主要讲解如何在vue项目中关闭或使用ESLint
ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint
详解 ESLint 规则,规范你的代码,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。
vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢?
配置 webpack.config.js文件里 plugins 属性,配置完以后就可以在代码里直接使用 _ ,而不再需要 import; 注意:(如果不配置eslint,浏览器就会报错:\\\\\\\'_\\\\\\\' is not defined no-undef)
官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码
Vue项目常用eslint配置需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装);React项目常用eslint配置同样安装依赖,React这里使用的airbnb扩展。安装eslint-import-resolver-webpack用来解决webpack中设置的别名eslint无法识别报错的问题。
ESLint不管是多人合作还是个人项目,代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!