webpack项目使用eslint建立代码规范

栏目: JavaScript · 发布时间: 5年前

内容简介:如果你还没有全局安装这个命令会生成一个然后就可以简单的lint某个文件了:

如果你还没有全局安装 eslint ,第一件事当然是安装 eslint

npm i -g eslint
复制代码

2. 初始化 eslint

eslint --init
复制代码

这个命令会生成一个 .eslintrc 的文件,有几种形式。选自己习惯的形式就行,我的生成的是一个 .eslintrc.js 文件,如下:

module.exports = {
    "extends": "standard"
};
复制代码

然后就可以简单的lint某个文件了:

eslint yourfile.js
复制代码

在项目里新添加 eSLint

然后找到 package.json ,把ESLint相关的依赖加进去,当然一个个安装也是可以的,只要你不嫌麻烦

"babel-eslint": "^7.1.1",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0", 
复制代码

执行 npm install 就好了

修改默认规则

关于 eslint 配置文件的详解,可以点击这里查看,这里只简单说下eslint规则详情

extends

继承某个已配置好的规则,从某个现有的规则上进行扩展。一般比较流行的eslint规则有三种:Google 标准、airbnb标准、standard标准。

Google 标准安装

npm install eslint eslint-config-google -g
复制代码

airbnb标准安装

airbnb 标准,它依赖 eslint , eslint-plugin-import , eslint-plugin-react , and eslint-plugin-jsx-a11y 等插件,并且对各个插件的版本有所要求。

你可以执行以下命令查看所依赖的各个版本:

npm info "eslint-config-airbnb@latest" peerDependencies
复制代码

你会看到以下输出信息,包含每个了每个plugins的版本要求

{ eslint: '^3.15.0',
  'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
  'eslint-plugin-import': '^2.2.0',
  'eslint-plugin-react': '^6.9.0'
}
复制代码

知道了每个plugins的版本要求后,代入以下命令执行安装即可使用:

npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g
复制代码

standard标准安装

Standard标准,它是一些前端工程师自定的标准。

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g
复制代码

rules

eslint 启用的规则列表。你可以重写 eslint 的规则,定义级别:

module.exports = {
    rules: {
        'no-console': 1
    }
};
复制代码

左边是规则,右边是级别。1为警告,2为报错,0为关闭。 规则详情请参考这里

React使用eslint

1. 安装 eslint-plugin-react

npm i eslint-plugin-react
复制代码

2. 修改 .eslintrc.js

修改 .eslintrc 的代码:

module.exports = {
    "extends": "standard",
    "env": {
        "browser": true,
        "es6": true,
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
          "experimentalObjectRestSpread": true,
          "jsx": true
        },
        "sourceType": "module",
        "ecmaVersion": 2018
      },
      "plugins": [
        "react"
      ],
}
复制代码
webpack项目使用eslint建立代码规范

关注前端撸客公众号


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

GWT in Action

GWT in Action

Robert Hanson、Adam Tacy / Manning Publications / 2007-06-05 / USD 49.99

This book will show Java developers how to use the Google Web Toolkit (GWT) to rapidly create rich web-based applications using their existing skills. It will cover the full development cycle, from ......一起来看看 《GWT in Action》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具