一、安装

npm i -D eslint
npm i babel-eslint \
eslint-config-airbnb \ // Airbnb的编码规范是在业界非常流行的一套规范
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-react -g

二、配置文件

  1. 新建.eslintsrc文件,在根目录下面。

  2. 对于与.eslintrc文件进行设置

1)每个环境的全局变量都不尽相同(如 nodejs 中没有 DOM 相关的全局变量)。在配置文件中可以自由的指定执行环境。

// .eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
};
(2)全局变量。如果你想在一个源文件里使用全局变量,推荐你在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。
// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};
(3)规则 在配置文件中可以设置一些规则。这些规则的等级有三种: "off" 或者 0:关闭规则
"warn" 或者 1:打开规则,并且作为一个警告(不影响exit code)
"error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)
也可以通过注释来取消 /* eslint-disable */

以下是简单的配置文件:

{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"parser": "babel-eslint",
"extends": "airbnb",
"parserOptions": {
"ecmaFeatures": 6,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"camelcase": "off",
"arrow-parens": "off",
"no-console": "warn",
"no-unused-vars": "warn",
"no-return-assign": "off",
"no-param-reassign": ["error", { "props": false }],
"no-nested-ternary": "off",
"linebreak-style": 0,
"eslint-disable-next-line":0
}
}

3.webpack进行配置

我希望在项目开发的过程当中,每次修改代码,它都能够自动进行ESLint的检查。因为在我们改代
码的过程中去做一次检查,如果有错误,我们就能够很快地去定位到这个问题,由于是我们刚刚改
过的,因此立马把它修复掉就OK了。这就避免了我们每次改了一大堆代码之后,要去提交的时候,
再去跑一次ESLint,有可能有很多地方要去改,浪费我们的时间,因为你一下子就定位不到这个问
题在哪里了。同时我们每次改代码的时候去检测,也能改善我们写代码的规范性,让我们慢慢养成
规范写代码的习惯。在module下面的rules里面添加一个对象:需要加上 enforece: 'pre',
这叫预处理。
{
enforce: 'pre', // 在webpack编译之前进行检测
test: /.(js|jsx)$/,
loader: 'eslint-loader',
exclude: [ // 除去node_modules
path.resolve(__dirname, '../node_modules')
]
},

三、使用

  1. 通过命令行来启动 ,--ext命令行选项指定一个逗号分隔的扩展名列表eslint --ext .js --ext .jsx client/

  2. webpack进行配置使用,在pagekage.json


    "scripts": {
    "lint": "eslint --ext .js --ext .jsx client/"
    },
  3. eslint 修复,可能在使用eslint产生很多报错,可以通过工具进行修复, npm run lint-fix,也可以使用 /* eslint-disable */注释来清除错误。

"scripts": {
"lint": "eslint --ext .js --ext .jsx client/",
"lint-fix": "eslint --fix --ext .js --ext src/"
},

四、Git提交

  1. 安装 husky ,npm i husky -D
  2. 修改package.json的scripts
"scripts": {
...
"lint": "eslint --ext .js --ext .jsx client/",
"precommit": "npm run lint"
}

五、editorconfig设置

不同编辑器对文本的格式会有一定的区别,如果不统一一些规范,可能你跟别人合作的时候,每次更新下来别人的代码就会一大堆报错。

  1. 新建.editconfig文件
  2. 文件内容
root = true                     // 表示当前是项目根目录

[*]                             // 所有文件都使用配置
charset = utf-8 // 编码格式
indent_style = space // Tab键缩进的样式,由space和table两种 一般代码中是space
indent_size = 2 // 缩进size为2
end_of_line = lf // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格

Eslint使用(webpack中使用)的更多相关文章

  1. webpack中配置eslint

    首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...

  2. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  3. webpack中利用require.ensure()实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  4. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  5. [转] webpack中配置Babel

    一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...

  6. [转]webpack中require和import的区别

    webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...

  7. webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)

    vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...

  8. 如何在webpack中成功引用到图片?

    打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...

  9. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  10. Webpack中publicPath设置

    webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...

随机推荐

  1. Oracle列转行函数版本不兼容解决方案

    业务场景 本博客记录一下Oracle列转行函数在Oracle11的一些不兼容问题,vm_concat在一些业务场景是必须的.不过这个函数使用要谨慎,底层实现应该也是group by等等实现的,性能并不 ...

  2. PLSQL使用scott登录

    Oracle有3种用户: system.sys.scott,其中system和sys的区别在与能否创建数据库,sys用户登录才可以创建数据库,而scott是给初学者学习的用户,学习者可以用Scott登 ...

  3. KNN算法基本实例

    KNN算法是机器学习领域中一个最基本的经典算法.它属于无监督学习领域的算法并且在模式识别,数据挖掘和特征提取领域有着广泛的应用. 给定一些预处理数据,通过一个属性把这些分类坐标分成不同的组.这就是KN ...

  4. 关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案

    楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...

  5. rest-framework之认证组件

    认证组件 认证简介 作用:校验是否登录 首先定义一个类,集成BaseAuthentication,写一个方法:authenticate,在方法内部,实证过程,认证通过,返回None或者两个对象(use ...

  6. skywalking部署

    官方文档:Setup java agent Backend and UI 下载地址:http://skywalking.apache.org/downloads/ 解压后目录 部署UI和收集器 进入w ...

  7. CNN 模型压缩与加速算法综述

    本文由云+社区发表 导语:卷积神经网络日益增长的深度和尺寸为深度学习在移动端的部署带来了巨大的挑战,CNN模型压缩与加速成为了学术界和工业界都重点关注的研究领域之一. 前言 自从AlexNet一举夺得 ...

  8. 最近公共祖先(least common ancestors,LCA)

    摘要: 本文主要介绍了解决LCA(最近公共祖先问题)的两种算法,分别是离线Tarjan算法和在线算法,着重展示了在具体题目中的应用细节. 最近公共祖先是指对于一棵有根树T的两个结点u和v,它们的LCA ...

  9. 【leet-code】135. 加油站

    题目描述 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] 升.你从其 ...

  10. TensorFlow中的Placement启发式算法模块——Placer

    背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 受限于单个Device的计算能力和存储大小,许多深度学习模型都有着使用模型分片 ...