规范化-ESLint

规范化是践行前端工程化中重要的一部分
为什么要有规范化标准:
软件开发需要多人协同,不同开发人员有着不同的编码习惯,不同的习惯增加项目维护成本,每个项目或团队需要明确统一的标准。
哪里需要规范化标准:
代码,文档,甚至提交的日志,开发过程中人为编写的成果物,代码最为重要。
如何实施规范化标准:
通过工具实现Lint,(刚有C语言的时候,有一些常见的代码问题是不能被编译器捕获到的,有人就开发了一个叫Lint的工具,用于在编译之前检查问题,后续这种工具,就都被称为Lint)


ESLint

目前最为主流的JavaScript Lint工具,检测代码质量,容易统一开发者的编码风格(缩进,分号等)
初次使用

npm install eslint --save-dev
npx eslint --init

npx是npm自带的一个工具,能执行npm包,简化了之前执行包的cli命令时的步骤,之前还要进入node_modules/.bin中

init过程就选择自己想要的就行了,之后会得到.eslintrc.js的初始文件

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true, // 运行环境是浏览器,所以包含window,document等全局变量,还有node等其他选项
        "es2015": true // ES2015中的全局变量例如promise,将可用
    },
    "extends": [
        "standard" // 初始化时的选项,表示继承standard风格
    ],
    "parserOptions": { // 设置语法解析器的相关配置
        "ecmaVersion": 6, // 支持到es6,例如es7的语法async将不支持
        "sourceType": "module"
    },
    "rules": { // 添加规则,更多规则可去官网查看
        "no-alert": "error" // 使用alert会抛出警告,有off,warning,error三种可选
    }
    "globals": { // 添加全局成员
        "qqqq": "readonly" // 以后可在全局直接使用qqqq变量
    }
};
npx eslint ./index.js  //校验文件
npx eslint ./index.js --fix  //修复文件

配置注释
如果不可避免的某一处代码就是要违反一下规则,我们不能因为这一个点,就去推翻校验规则的配置

const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 
console.log(str1)

// eslint-disable-line [no-template-curly-in-string]就可忽略此行代码中的此规则
结合webpack
首先你拥有一个webpack的项目

  • 安装eslint模块
  • 安装eslint-loader模块
  • 初始化.eslintrc.js配置文件
eslint检查肯定要在babel-loader编译之前进行,所以
// webpack.config.js
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.js$/,
        enforce: 'pre',  // 设置执行顺序,pre优先处理,post 最后处理
        exclude: /node_modules/,
        use: 'eslint-loader'
      },
     {
        test: /\.css$/,
        exclude: /node_modules/,
        use: 'css-loader'
      }
    ]
  },

如果你的是react项目,因为它有一些jsx语法,所以需要安装一个eslint-plugin-react插件,并配置.eslintrc.js

// .eslintrc.js
module.exports = {
  extends: [
    'standard',
    'plugin:react/recommended'
  ],
}

GitHooks配合ESLint

GitHook也称之为git钩子,每个钩子都对应一个任务,比如commit,push
通过shell脚本可以编写钩子任务触发时,要具体执行的操作。


image.png

我有一个test项目,从中可以看到.git=>hooks,hooks里面全都是各种时机的勾子。我们复制一份pre-commit.sample,删掉.sample

// pre-commit
#!/bin/sh
echo "YES YES"

然后执行git commit -m ""后你会发现输出了YES YES,这就简单的实现了git gook。接下来结合eslint,在提交前自动做检查。

我们前端人员大部分并不擅长写shell脚本,所以我们使用Husky来实现githooks的使用需求。

npm install husky -D
// package.json 中添加
{
  "scripts": {
    "lint": "eslint ."
  },
    "husky": {
        "hooks": {
           "pre-commit": "npm run lint"
        }
     }
}

再试一下commit,发现可以了。
后续还可以配合lint-staged,完成eslint后再自动格式化等操作。

你可能感兴趣的:(规范化-ESLint)