在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端编码规范
栏目: JavaScript · 发布时间: 5年前
内容简介:更新时间:2019-01-22在项目开发过程中,编写符合团队编码规范的代码是尤为重要的,程序首先是给人看的,其次才是给机器去执行。我们在开发工作中,代码维护会占很大的比重,很多时候我们还需要阅读他人的代码,如果没有一个统一的编码规范,将会给我们的工作带来很大的困扰。因此,我们期望在开发过程中遵循统一的编码规范,以实现避免基本语法错误、代码格式化、规避一些不推荐的用法等目的,最大程度的保证代码的可读性和正确性。通常每个团队都会制定适合自己的编码规范和代码风格,但是仅仅制定规范是不够的,还需要借助代码检查工具来
更新时间:2019-01-22
前言
为什么要使用 ESLint
在项目开发过程中,编写符合团队编码规范的代码是尤为重要的,程序首先是给人看的,其次才是给机器去执行。我们在开发工作中,代码维护会占很大的比重,很多时候我们还需要阅读他人的代码,如果没有一个统一的编码规范,将会给我们的工作带来很大的困扰。
因此,我们期望在开发过程中遵循统一的编码规范,以实现避免基本语法错误、代码格式化、规避一些不推荐的用法等目的,最大程度的保证代码的可读性和正确性。通常每个团队都会制定适合自己的编码规范和代码风格,但是仅仅制定规范是不够的,还需要借助代码检查 工具 来强制推行团队的编码规范,比如 ESLint 代码检查工具。
本文会介绍一种 ESLint 的配置方案,但本文关于 ESLint 的配置是基于一定的开发环境的,偏重于实际应用,并非 ESLint 本身的介绍。这里对 ESLint 的配置基于以下环境:
- React.js create-react-app 脚手架项目
- 使用 VSCode 编辑器
- 基于 Airbnb 编码规范
相关链接
- ESLint 代码检查工具
ESLint 中文是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。
JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让 程序员 在编码的过程中发现问题而不是在执行的过程中。
ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。
- Create-React-App 应用
Create React App 是 React 官方支持的创建单页面 React 应用的方式,通过create-react-app
脚手架命令可以快速创建一个 React 应用,免去了我们自己配置 webpack 的麻烦,我们这次 ESLint 的配置方案就是基于create-react-app
项目的。 - VSCode 编辑器
VSCode 是微软的良心之作,是一个轻量且强大的代码编辑器,支持 Windows 和 Linux。内置 JavaScript、TypeScript 和 Node.js 支持,而且拥有丰富的插件生态系统,还可以通过安装插件来支持 C++、C#、 Python 、 PHP 等其他语言,堪称开发的利器。插件扩展: Extensions for the Visual Studio family of products 。 - Airbnb 编码规范
Airbnb JavaScript Style Guide 是独角兽公司 Airbnb 内部的 JavaScript 编码规范,该项目是 Github 上很受欢迎的一个开源项目,在前端开发中使用广泛,本文的 ESLint 配置规则就是以 Airbnb JavaScript 编码规范(2.0) 和 Airbnb React/JSX 编码规范 作为基础的。
具体配置方法
在 VSCode 中安装 ESLint 扩展
在 VSCode 扩展面板搜索 ESLint,找到安装最多的那个安装即可,安装完成之后需要 重新加载
以激活扩展,但想要让扩展进行工作,我们还需要进行 ESLint 的安装配置。
创建 CRA 项目
我们的配置方案是基于 CRA 脚手架项目进行测试的,因此我们要先创建一个 CRA 项目,具体方法详见官方文档: Create React App 。
创建的 CRA 项目文件组织结构如下:
my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js
安装 ESLint
ESLint 可以选择进行本地安装:
npm install eslint --save-dev
也可以进行全局安装:
npm install -g eslint
一般推荐进行全局安装,使其可以作用于我们所有的项目。具体请参见 eslint-npm 文档 。
创建 ESLint 配置文件
ESLint 安装完成之后,我们需要创建一个配置文件,为了详细演示 ESLint 是如何在实际项目中工作的,我们接下来的操作都在我们上面已经创建的 CRA 脚手架项目中进行,且先不考虑 Airbnb 编码规范的使用,而是先创建一个较为常见的自定义代码风格。
我们在创建的 my-app
项目下执行 cmd 命令 eslint --init
,根据提示我们选择通过 Answer questions about your style
的方式创建一份自定义的代码规范,下图是一个示例,具体可根据项目需要进行配置:
这样我们就已经创建了一个自定义的 ESLint 配置文件,可以看到在 my-app
项目中生成了一个名为 .eslintrc.js
的文件,其中的规则就是根据我们上图中的选择进行设定的,具体内容如下:
/* .eslintrc.js */ module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "windows" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } };
至此,我们在 VSCode 中打开 my-app
项目,可以发现 ESLint 扩展已经可以正常工作了,ESLint 会自动检测语法错误,并高亮显示,同时在 VSCode 编辑器的问题窗口会输出相应的错误信息。
设置 autoFixOnSave
经过以上步骤操作之后,ESLint 扩展已经正常工作了,并且可以根据错误提示手动修复检测到的错误,但是这样显然是低效和繁琐的,这个时候就需要配置 ESLint 扩展插件的自动修复功能了。
在 VSCode 中依次点击 文件-->首选项-->设置
,打开 settings.json
文件,在设置中搜索 eslint
,会发现 ESLint 扩展插件的自动修复功能是关闭的,我们在右侧的用户设置中对此项进行修改,将其设置为: "eslint.autoFixOnSave": true,
,这样 ESLint 扩展插件的自动修复功能就打开了。
此时,我们再次打开错误页面,执行保存(Ctrl+s)操作,就会发现 eslint
的错误可以自动修复了,如果当前页面错误较多的话,可能需要多次执行 Ctrl+s
。
使用 Airbnb 编码规范
上面我们已经使 ESLint 在我们的项目中正常工作了,但使用的代码风格是我们自定义的,有时候我们希望使用一些大厂的比较成熟的代码规范,比如 Airbnb JavaScript Style
,接下来我们就将自定义的 ESLint 配置改为使用 Airbnb 编码规范配置。
首先,我们需要安装 2 个 npm 依赖包:
-
babel-eslint ,增强语法识别能力
babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint.
$ npm i babel-eslint
-
eslint-config-airbnb ,Airbnb 提供的支持 ECMAScript 6+ 和 React 的 ESLint rules,包括
eslint
eslint-plugin-import
eslint-plugin-react
以及eslint-plugin-jsx-a11y
。Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y. If you don't need React, see eslint-config-airbnb-base.
// If using npm 5+, use this shortcut $ npx install-peerdeps --dev eslint-config-airbnb
然后我们要修改 .eslintrc.js
文件,以使用我们安装的 Airbnb 编码规范,修改后内容如下:
/* .eslintrc.js */ module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "airbnb", // 使用 eslint-config-airbnb "parser": "babel-eslint", // 增强语法识别能力 "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2017, "sourceType": "module" }, "rules": { // 这里可以根据需要对 airbnb 的规则进行修改,此处仅为示例 "linebreak-style": 0, "prefer-destructuring": 0, "prefer-const": 0, "one-var": 0, "comma-dangle": ['error', { arrays: 'only-multiline', objects: 'always-multiline', imports: 'only-multiline', exports: 'only-multiline', functions: 'ignore', }], "no-console": 1, "import/prefer-default-export": 0, "import/no-extraneous-dependencies": [2, {'devDependencies': true}], "react/prop-types": 1, "react/forbid-prop-types": 0, "react/jsx-filename-extension": [2, {extensions: ['.js', '.jsx', '.tsx']}], "jsx-a11y/anchor-is-valid": 0, // VSCode 的 ESLint 扩展插件暂时无法正确修复这条规则带来的错误 "react/jsx-one-expression-per-line": 0, } };
至此,我们完成了在 React-CRA 应用中配合 VSCode 使用 ESLint 的全部配置。
错误信息
在修改 .eslintrc.js
文件以使用Airbnb 编码规范(eslint-config-airbnb)的过程中,发现 VSCode 的 ESLint 扩展插件对其中的有些规则不能正确的自动修复,比如:
// One JSX Element Per Line // https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-one-expression-per-line.md 'react/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
查阅 eslint-config-airbnb 的文档发现, eslint-config-airbnb v17.1.0
版本修改了上面这条规则,具体可以参见: re-enabling jsx-one-expression-per-line
allowing single children 以及 One JSX Element Per Line (react/jsx-one-expression-per-line) 。
当前版本的 VSCode 的 ESLint 扩展插件无法正确修复这条规则带来的错误,由于暂时找不到其他解决方法,这里就先将这条规则关闭。
由此可见,随着 VSCode 或 ESLint 相关的插件和依赖包版本的变动,配置也会发生一些不可预期的变化,这里将用来测试的 CRA 脚手架项目的 package.json
文件内容附录如下;
/* package.json */ { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "babel-eslint": "^10.0.1", "react": "^16.7.0", "react-dom": "^16.7.0", "react-scripts": "2.1.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "eslint": "^5.3.0", "eslint-config-airbnb": "^17.1.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^6.1.1", "eslint-plugin-react": "^7.11.0" } }
以上所述就是小编给大家介绍的《在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端编码规范》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。