规范化标准 - ESLint

一. 规范化介绍

1. 为什么要有规范化标准

软件开发需要多人协同,不同开发者有不同的编码习惯和喜好,不同的喜好增加项目维护成本,每个项目或团队需要明确统一的标准。

2. 哪里需要规范化标准

代码、文档、设置提交日志,开发过程中人为编写的成果物,其中代码标准化规范最为重要。

3. 实施规范化的方式

编码前认同标准约定、通过工具实现 Lint(对代码进行规范化,统称 Lint)。

 

二. ESLint 介绍

ESLint 是目前最主流的 Javascript 代码的 Lint 工具,可以很容易地监测 JS 代码质量,统一开发者的编码风格,并进一步提高开发者的编码能力。

 

三. ESLint 的基本使用

1. 基本使用

安装:

cnpm i -D eslint

初始化其配置文件(npx 是一个命令执行工具 作用相当于在node_modules下执行 eslint --init):

npx eslint --init

校验文件:

npx eslint ./01-prepare.js

校验文件并修复:

npx eslint ./01-prepare.js --fix

2. 配置注释 - 让 eslint 对部分代码不进行(某项或全部规则)的检查

配置注释的文档: http://eslint.cn/docs/user-guide/configuring#configuring-rules

/* index.js 文件 */

// 跳过对当前行的检查
console.log('123'); // eslint-disable-line

// 跳过对当前的 某个规则 的检查
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string

// 跳过对下一行的检查
// eslint-disable-next-line
alert('foo');



/* detail.js 文件 - 跳过对本文件的检查  */
// eslint-disable

 

四. ESLint 结合 Webpack

安装 eslint:

cnpm i -D eslint

安装 eslint-webpack-plugin:

cnpm i -D eslint-webpack-plugin

初始化 eslint 配置文件 .eslintrc.js:

npx eslint --init

在 webpack.config.js 文件中新增如下配置:

const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
    plugins: [ 
        new ESLintPlugin()
    ]
}

PS: 对于 React 项目,eslint 会报 如下两个错误:

    error 'React' is defined but never used no-unused-vars

    error 'App' is defined but never used no-unused-vars
  解决方法是:

    cnpm i -D eslint-plugin-react

    然后在 .eslintrc.js中,设置:

    module.exports = {

        "extends": "plugin:react/recommended",

    }

 

五. ESLint 结合 Gulp

安装 eslint:

cnpm i -D eslint

安装 gulp-eslint:

cnpm i -D gulp-eslint

在 gulpfile.js 文件中,把 js 任务配置上 gulp-eslint:

const eslint = require('gulp-eslint');

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(eslint())                // 执行 eslint 检查
    .pipe(eslint.format())         // 打印 eslint 检查结果
    .pipe(eslint.failAfterError()) // eslint 如有报错,则本任务终止
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

module.exports = {
  script
}

安装 babel-eslint:

cnpm i -D babel-eslint

在 .eslintrc.js 文件中,配置上 parser:

module.exports = {
    "env": {
        "browser": true,
        "jquery": true,       // + 如果用到了jquery 必需
    },
    "parser": "babel-eslint", // + 必需
    "extends": [
        "standard"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    },
};

 

六. 样式规范工具  StyleLint  和 通用代码规范工具 Prettier

参考相关 npm 文档。

本文 完。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值