React技术栈之ESlint
发布时间:2020-12-15 07:15:33 所属栏目:百科 来源:网络整理
导读:ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。 详细的可以参考:ESLin
ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。 详细的可以参考:ESLint中文 让项目加上ESLint代码规范支持非常容易。 安装安装ESLint、ESLint loader npm install --save-dev eslint@3.19.0 npm install --save-dev eslint-loader 逐个配置规则有点麻烦,ESLint有很多第三方配置好的格式插件,Airbnb开发配置合集就比较常用: npm install --save-dev eslint-config-airbnb Airbnb包括了以下三个插件需要安装: npm install --save-dev eslint-plugin-import npm install --save-dev eslint-plugin-react npm install --save-dev eslint-plugin-jsx-a11y 项目根目录下创建并ESLint配置文件,.eslintrc.js: module.exports = { // 指定校验的ECMAScript的版本及特性 "parserOptions": { "ecmaVersion": 7,// ECMAScript版本,7为ES7 "sourceType": "module",//默认script,如果代码是ECMAScript模块,设置为module "ecmaFeatures": { // 使用额外的语言特性 "jsx": true // 启用JSX } },// 当访问未定义的变量时,no-undef 规则将发出警告 // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量 "env": { "es6": true,"node": true,"browser": true,},// 当访问未定义的变量时,no-undef 规则将发出警告 // 脚本在执行期间访问的额外的全局变量 "globals": { "document": true,"navigator": true,"window":true,"node":true },// 使用第三方airbnb开发配置合集 "extends": "airbnb",// eslint-config-airbnb包括了以下3个插件 "plugins": [ "react","jsx-a11y","import" ],// 定义自己的规则 "rules": { "comma-dangle": ["error","never"],// 要求或禁止末尾逗号:不允许逗号 "indent": ["error",4],// JavaScript代码强制使用一致的缩进:4格缩进 } }; 可以参照ESLint完整规则列表,找到并定制自己的规则。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |