返回

Eslint自动格式化：代码整洁的卫士

前端

Eslint，作为JavaScript代码的卫士，不知可否护住你代码的整洁？还是听我娓娓道来它的“法宝”吧！

Eslint遵循可插拔、可配置的原则，让其可根据不同的编程范式、习惯进行设置和定制，内置的各种规则和插件扩展了其功能，以满足不同层次、不同风格的开发需求。搭配husky、lint-staged和prettier，更是让代码管理如虎添翼，使开发者的工作事半功倍。

不用多言，直接上实践。

npm i husky lint-staged eslint prettier --save-dev

安装完毕，配置package.json文件中的scripts。

"scripts": {
    "lint": "eslint --ignore-path .gitignore src/**/*.js",
    "lint:fix": "eslint --ignore-path .gitignore --fix src/**/*.js",
    "precommit": "lint-staged"
},

编写.huskyrc文件，配置预提交时的操作。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
if [ $? -ne 0 ]; then
  echo "❌格式化有误"
  exit 1
fi

写入.prettierrc文件和.eslintrc文件，规范代码样式。

// .prettierrc
{
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true,
  "jsxBracketSameLine": false
}

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

最后，编写.lintstagedrc文件，设置文件提交前的检测和自动修复。

"*.{ts,tsx,js,jsx}": [
  "eslint --fix"
]

至此，全部配置完毕。

随着Eslint自动格式化流程的建立，代码书写规范不再让人头疼，也不会成为团队成员之间的争论点。

为了让您进一步了解Eslint的强大，列举了一些常用的插件和规则：

插件：

  • eslint-plugin-react：用于React代码的检查
  • eslint-plugin-prettier：用于检查代码是否符合prettier的规则
  • eslint-plugin-import：用于检查代码的导入是否规范

规则：

  • no-unused-vars：检查变量是否未被使用
  • no-console：检查代码是否包含console语句
  • no-var：禁止使用var声明变量
  • prefer-const：鼓励使用const声明变量
  • prefer-template：鼓励使用模板字符串

您可以根据自己的需求，安装并配置这些插件和规则，让Eslint更好地为您服务。

至此，Eslint自动格式化的介绍告一段落。

愿Eslint成为您代码洁净的卫士，让编程工作事半功倍！