eslint+prettier 实现代码规范自动化

Xia12137817
1,672 阅读4分钟

标准化是现代工业重要的特征之一，而作为现代工业化诞生的职业码农，必然也要走向标准化。 而标准化的下一步就是自动化

下面我将用：

  • vscode
  • prettier
  • eslint
  • eslint-config-airbnb-base
    来实现代码规范的标准化

vscode 开箱即用的 code formatter 功能

vscode 提供开箱即用的代码样式化功能（没有 css 格式化功能），
下面在当前文件夹下创建测试文件：./src/demo.html、./src/fun.js、./src/style.css，
格式化代码的快捷键是(win)：alt + shift + f

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo page</title>
</head>
<body><h1>This is a test page</h1>
<p>Page content</p>
</body>
</html>

格式化后：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo page</title>
</head>

<body>
    <h1>This is a test page</h1>
    <p>Page content</p>
</body>

</html>

JS 格式化前：

function getUserInfo(name) {let HelloStr = "Hello, your name is: "
return HelloStr + name
}

格式化后：

function getUserInfo(name) {
    let HelloStr = "Hello, your name is: "
    return HelloStr + name
}

CSS 格式化前：

.box{background: #fff; font-size: 13px;}

格式化后：

.box {
    background: #fff;
    font-size: 13px;
}

但是这只是单个文件，对于多个文件甚至是一个团队的规范这种依赖编辑器的格式化太过于单薄了，下面我们有请prettier对代码进行格式化。

用 prettier 对代码进行格式化

什么是prettier：

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

多编辑器兼容，多语言兼容，完美。

由于 vscode 默认有格式化的功能，安装了 prettier 插件后，prettier 也有格式化的功能以会造成冲突（对于html, js），这里编辑器会提示你，可以进行配置。

image.png

然后通过 CTRL + , 快捷键进入配置界面进行管理，所有修改后的结果会保存在 settings.json 文件里。 在搜索框内 输入 editor.defaultFormatter 选择 prettier image.png

eslint配置代码校验+本地配置prettier插件进行整个项目的格式化

eslint对项目代码进行验证

记得在电脑上安装node.js

然后 npm init -y 对项目初始化

npm i -D eslint 安装eslint

npx eslint --init 初始化eslint

image.png

经过上面的操作，将 eslint 及相关的包安装到项目里了 package.json如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^8.17.0",
    "eslint-plugin-vue": "^9.1.0"
  }
}

项目目录下多了一个 eslint 的配置文件 .eslintrc.js :

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

这个配置文件的内容，是通过 npx eslint --init 自动生成的，当然你也可以手动配置，所有的选项这里都有中文说明：eslint.cn/docs/user-g…

或者 通过我的码云 下载文件查看

接下来就可以手动执行校验了：

输入 npx eslint ./src/fun.js

image.png

报错了，说明程序顺利运行

现在采用的规则是 eslint:recommended ，我们的目标是采用 'eslint-config-airbnb-base'，所以再安装相应的包：

npm i -D eslint-config-airbnb-base eslint-plugin-import

然后对 .eslintrc.js 进行配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "airbnb-base",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue"],
  rules: {
    "linebreak-style": ["off", "windows"]
  },
};

再次进行校验

image.png

可以看到明显比之前的错误要多，Aribnb 的规则相对较为严格，可以规避很多低级错误。

.eslintrc.js 的 rules 里加了 'linebreak-style': ["off", "windows"]，是由于不同系统间对换行的处理不同导致的，加这个规则来处理这个问题。

给vscode安装eslint (编辑器没有报错 加插件)

image.png

image.png

这样操作后我们就可以一边编写代码一边查看报错信息了

让我们把eslint和prettier进行结合

前置工作： image.png

  1. 先打开vscode软件，方便快捷的方式就直接使用快捷键ctrl+,（是ctrl加逗号）唤出快速搜索条界面。

image.png

  1. 接下来先设定自动保存文件，搜索框贴入files.autoSave筛出设置项，并把设置项属性选择为onFocuschange。

image.png

  1. 设定编辑器默认代码格式化的插件为Prettier，同理在搜索设置框贴入editor.defaultFormatter，将配置项选择为Prettier。

image.png

  1. 设定Prettier插件保存时自动格式化代码，搜索设置项贴入editor.formatOnSave，将如下图所示的选项框打钩即可。

image.png

然后你就可以在你失焦之后vscode就会自动给你格式化代码

image.png

没有报错

校验并且格式化 vue 代码 （主要是项目大部分为Vue.js）

首先，要想 vscode 认识 vue 文件，需要安装插件 vetur，基本上安装好此插件后就可以安心的编写Vue代码了，vetur 的默认配置如下：

{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}

但是这个插件有个问题 它参考的规则是 prettier 规则，而非 eslint 规则。

为了改变这种情况 我们需要

  1. 安装npm i -D prettier-eslint
  2. 将 vetur 中 js 的 formatter 设置为 prettier-eslint

image.png

最后总结

  1. 安装 vscode 插件 eslint、 prettier、 vetur
  2. 配置 eslint 规则
  3. 配置 prettier ，使其按着 eslint 工作
  4. 配置 vetur

最终的配置文件如下： settings.json

{
  "prettier.resolveGlobalModules": false,
  "rest-client.excludeHostsForProxy": [],
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "rest-client.certificates": {}
}
···
avatar
文章
阅读
粉丝