关于eslint:通过引入eslintconfig包的方式一站式解决项目代码风格和规范

3次阅读

共计 4394 个字符，预计需要花费 11 分钟才能阅读完成。

大家好，我是前端老六。明天想提及一下我的项目代码标准这一块，平时咱们在搭建一个前端我的项目的时候，我的项目代码标准是咱们要思考的，在现在多人开发一个我的项目的时候那更是不能忽略。对于前端来说呢，咱们罕用的就是 eslint+prettier，两者集成的形式，eslint 负责监测咱们的语法错误，而 prettier 对咱们的代码格调进行标准。

ESLint 是一个开源的 JavaScript 代码查看工具，由 Nicholas C. Zakas 于 2013 年 6 月创立。代码查看是一种动态的剖析，罕用于寻找有问题的模式或者代码，并且不依赖于具体的编码格调。对大多数编程语言来说都会有代码查看，一般来说编译程序会内置查看工具。

JavaScript 是一个动静的弱类型语言，在开发中比拟容易出错。因为没有编译程序，为了寻找 JavaScript 代码谬误通常须要在执行过程中一直调试。像 ESLint 这样的能够让程序员在编码的过程中发现问题而不是在执行的过程中。

Lint 工具经验了 JSLint、JSHint，最初是 ESLint，ESLint 号称下一代的 JS Linter 工具，它的灵感来源于 PHP Linter，将源代码解析成 AST，而后检测 AST 来判断代码是否合乎规定。ESLint 应用 esprima 将源代码解析吃成 AST，而后你就能够应用任意规定来检测 AST 是否合乎预期，这也是 ESLint 高可扩展性的起因。

ES6 公布后，因为新增了很多语法，JSHint 短期内无奈提供反对，而 ESLint 只须要有适合的解析器就可能进行 lint 查看。这时 babel 为 ESLint 提供了反对，开发了 babel-eslint，让 ESLint 成为最快反对 ES6 语法的 lint 工具。

应用未声明变量、批改 const 变量……

申明而未应用的变量、反复的 case ……

可参考 airbnb style、javascript standard

加不加分号？应用 tab 还是空格？

prettier 是一款强势果断的代码格式化工具，它简直移除了编辑器自身所有的对代码的操作格局，而后从新显示。就是为了让所有用这套规定的人有完全相同的代码。在团队合作开发的时候更是体现出它的劣势。与 eslint，tslint 等各种格式化工具不同的是，prettier 只关怀代码格式化，而不关怀语法问题。
prettier 的劣势也很显著，它反对

JavaScript（包含试验性功能）
JSX
Angular
Vue
Flow
TypeScript
CSS、Less 和 SCSS
HTML
JSON
GraphQL
Markdown，包含 GFM 和 MDX
YAML

不少编辑器内置了 prettier 插件反对，能够启用在保留时主动格式化代码格调，例如，如果你用的是 Webstorm，在我的项目下载了 prettier 的状况下能够这样这样设置一下

应用 Prettier 在 code review 时不须要再探讨代码款式，节俭了工夫与精力。

就如上述一样，基于 eslint 和 prettier 的各自个性，不少人就想那么把他们两个集合起来，高兴就加倍了，刚好就是一个负责监测语法，一个负责标准格调，一个是灵魂，一个是形体，嗯 … 绝妙！Nice*1000…

查阅 ESlint 文档以及平时所做的我的项目咱们晓得 ESlint 很多规定是须要在我的项目根目录创立配置文件来配置的，例如 .eslintrc 文件。咱们须要在外面退出咱们的配置规定，例如我这里有一个 vue3+typescript，我须要配置规定来适配咱们的我的项目

/* .eslintrc */
{
    extends: [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
    ],
    overrides: [],
    parser: "vue-eslint-parser",
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        parser: "@typescript-eslint/parser",
    },
    plugins: ["vue", "@typescript-eslint"],
    rules: {},};

prettier 能够通过增加配置文件，来更改默认的 prettier 格式化代码的规定，就是说如果你应用 prettier 的默认规定，那么你不须要在根目录下创立配置文件，这里我是须要的，于是创立一个 .prettierrc 文件

/* .prettierrc */
{
    "semi": false,
    "singleQuote": true,
    "printWidth": 120,
    "htmlWhitespaceSensitivity": "ignore",
    "plugins": ["prettier-plugin-tailwindcss"]
}

接下来咱们须要把 prettier 集成进去，让 eslint 也能提醒代码中不合乎 prettier 的格局谬误。这里须要装置两个插件。

eslint-plugin-prettier：基于 prettier 代码格调的 eslint 规定，即 eslint 应用 pretter 规定来格式化代码。

eslint-config-prettier：禁用所有与格局相干的 eslint 规定，解决 prettier 与 eslint 规定抵触，确保将其放在 extends 队列最初，这样它将笼罩其余配置

/* .eslintrc */
{
extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"  /* 新增，必须放在最初面 */
],
overrides: [],
parser: "vue-eslint-parser",
parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    parser: "@typescript-eslint/parser",
},
plugins: ["vue", "@typescript-eslint"],
rules: {},};

功败垂成，最初装置这些配置要用到的所有依赖，如下

{
  "@typescript-eslint/eslint-plugin": "^5.50.0",
  "@typescript-eslint/parser": "^5.50.0",
  "eslint-plugin-vue": "^9.9.0",
  "eslint-config-prettier": "^8.6.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint": "^8.33.0",
  "prettier": "^2.8.3"
}

这样之后一个反对 vue3-ts 的 eslint+prettier 集成就在你的我的项目中失效了，接下来就是欢快的敲代码了。

如果说咱们每次开始配置一个我的项目的 ESlint+prettier 都这样操作是不是太麻烦了，又要创立配置文件配置好多，还要下载依赖，少了一个都要出问题，还要去翻之前是怎么配的，总之来说就是太麻烦了，像我这种记忆力又不好动作还慢的人来说，那不是光一个配置搞半天。嗯 … 不行，我身材上心理上都承受不了，好受。过后一时没有想到好的解决办法，这个问题就搁置了良久。

在一般上班族的一天，这天公司技术 leader 让我钻研一下 nuxt3，把之前那套 nuxt2 的我的项目基础架构降级到 nuxt3，当前的新我的项目用 nuxt3 写。那天我搞着搞着，慢慢的来到了 Eslint 的脚下，我发现如同我不会配它，之前都是 vue3 的插件和规定，这次来个核弹。于是我关上我的 github 找找解决方案，慌忙的寻找，直到我看到了一块神奇的代码

我在想，nuxt3 我的项目能够这么不便去配置吗？

起初我去看了这个库的源码，豁然开朗，原来配置项包含插件都是能够打成包分享的，那么我眉头一皱; 计上心来，目前有那么多类型的前端我的项目，js 的 vue3、react、nuxt3 等，ts 的 vue3、react、nuxt3 等。github 有没有一站式把所有根底 eslint+prettier 对应的各种各种我的项目的都配置好的库呢，几经寻找，我看到了这个库，code-style-lint，他把各种类型我的项目的 eslint+prettier 曾经集成了，能够间接简便的在我的项目中使用，并且不影响你在我的项目中笼罩这个库原来的配置和扩大其余规定，在应用了过后，我的 vue3+ts 我的项目的 eslint 配置文件简化成了这样

//.eslintrc
{
  "env": {
  "browser": true,
      "es2021": true,
      "node": true
},
  "extends": [
  "./.eslintrc-auto-import.json", /* vite-plugin-autoImport 插件的 eslint 规定 */
  "code-style-lint-vue3-ts"
],
    "rules": {"vue/multi-word-component-names": "off"}
}

另外我也不必下载那么多的配置须要用到的依赖项了，

{
  "@typescript-eslint/eslint-plugin": "^5.50.0",
  "@typescript-eslint/parser": "^5.50.0",
  "eslint-plugin-vue": "^9.9.0",
  "eslint-config-prettier": "^8.6.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint": "^8.33.0",
  "prettier": "^2.8.3"
}

变成了，

{
  "eslint-config-code-style-lint-vue3-ts": "^3.0.5",
  "eslint": "^8.33.0",
  "prettier": "^2.8.3"
}

平时大家在做我的项目的时候我的项目配置这里会遇到一些问题，eslint+prettier 又是比拟惯例罕用的计划，心愿这篇文章可能解决你的局部问题。感激你的几分钟哟！Day day up ! QQQQQQ

提到的库：code-style-lint, nuxt-eslint

参考文章：vue3+ts+vite 我的项目中应用 eslint+prettier+stylelint+husky 指南 – 掘金 (juejin.cn)

正文完

eslint

发表至： eslint

2023-02-17

0

关于eslint:通过引入eslintconfig包的方式一站式解决项目代码风格和规范

关于eslint:Web项目如何配置Eslint

关于eslint:Taro-VUE-style-项目增加lint以及git-hooks

关于eslint:ESLint配置文件pluginsextendsrules的区别

关于arm:嵌入式ARM设计编程四-ARM启动过程控制

关于eslint:通过引入eslintconfig包的方式一站式解决项目代码风格和规范

背景

ESlint

ESlint 能够做些什么

1. 防止低级 bug，找出可能产生的语法错误

2. 提醒删除多余的代码

3. 确保代码遵循最佳实际

4. 对立团队的代码格调

Prettier

搭配干活，高兴加倍

随之而呈现的问题

引发的思考

转折

结语

站内搜索