关于前端:用-eslint-和-prettier-让跨-IDE-协作更舒服

搭配 eslint 和 prettier 能够进行代码品质优化和跨 IDE 合作
装置插件和 npm 包以顺利应用 eslint 和 prettier
筹备配置文件 .eslintrc.js 和 .prettierrc.js（能够借助工具生成也可手写）
提高效率，开启 IDE 的保留主动格式化性能
用 npm 能够更不便地治理 eslint 和 prettier 配置

之前阐明了一下 eslint 和 prettier 的区别，这次是要实际解决 VScode 和 jetbrains 系 IDE 的合作问题。

jetbrains 系在输出 html 标签名后如果在前面接一个属性的话，再换行就会主动对齐到标签名的长度，然而如果前面不接属性间接换行的话就定位到失常缩进地位。第一种状况如下图的 el-select 第二种状况如 el-option，即便再应用 IDE 的格式化也是依照这个“设定”格式化。

然而 vscode 中找不到配置这种缩进的办法，要做到兼顾两款 IDE 和所有开发者的格局对立，便很天然地想到 eslint 和 prettier 了，这也是前端我的项目中非常罕用的代码管理工具。

这里就有一个小问题，eslint 不够吗？某些状况下的确不够，虽说 eslint 也能管代码格局，但他毕竟是个 ES lint……Vue 文件里模板局部的缩进他不论，所以如果需要是 vsc 和 jb 合作的话，只用 eslint 不够，模板局部得靠 prettier 对立。都用 vsc 的话短时间没大问题，然而随着 vsc 版本升级指不定格式化算法会批改，所以还是多加一个 prettier 靠谱。

插件页找这两个即可：

Prettier – Code formatter
ESLint

webstorm 自带 eslint，prettier 能够在 settings-plugins 里搜寻装置（ws 仿佛也默认装置了 prettier）。

https://www.jetbrains.com/hel…
https://www.jetbrains.com/hel…

IDE 插件都不蕴含两个格式化程序的外围算法，仅仅提供与 IDE 沟通的桥梁，他们的运行都是依赖于 node_modules 目录里的程序，所以 npm 包装置是必须的。

npm install --save-dev eslint eslint-plugin-vue prettier

其中 eslint-plugin-vue 是 Vue 专用的 lint 规定，对应 react 也会有。

而且还须要在两个 IDE 都装上对应插件

在设置里能够设置 prettier 的门路：

ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use ESLint for everything, or you can combine both using Prettier to format your code and ESLint to catch possible errors.

npx eslint --init

初始化倡议间接三个都选 To check syntax, find problems, and enforce code style。

输入格局当然还是举荐 js，一来自身就受到 eslint 治理，而且还能够依据程序自定义输入后果。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {indent: ['error', 2],
    'linebreak-style': ['error', 'windows'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

看起来配置很少，其实都稀释在 extends 里的预设规定集里了。

<!– const 会不会被减速 –>

官网自带的 playground 能够帮你生成 json 文件，拿到了间接新建 js 文件用 module.exports = 输入就能够了

全副可选配置的具体解释能够看这里 https://prettier.io/docs/en/o…

module.exports = {
  arrowParens: 'always',
  bracketSameLine: true,
  bracketSpacing: true,
  embeddedLanguageFormatting: 'auto',
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  printWidth: 80,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  vueIndentScriptAndStyle: false,
}

有时候 prettier 和 eslint 的规定有抵触，prettier 官网有相干专题形容这个问题，不过集体认为没有必要额定加兼容软件，因为 prettier 的配置原本就很少，手动兼容也不是难事，再加这些工具可能反而会减少保护累赘。

像是默认生成的 eslint 规定在格式化 switch 的时候和 prettier 规定就不一样，然而 prettier 没有粗疏到管制 switch 缩进的规定，所以要改 eslint 迁就 prettier：indent: [2, 2, { SwitchCase: 1}],

只管快捷键很不便，还是不如一个 ctrl S 来得间接。

webstorm 能够在 settings 搜寻到保留时的行为，勾选 eslint 和 prettier。

vscode 能够间接写入这个配置（默认格式化工具应用 prettier）：

{
  "editor.codeActionsOnSave": {"source.fixAll.eslint": true},
  "editor.formatOnSave": true
}

我的项目立项时未应用代码格式化工具，起初再接入的我的项目没必要立刻开启提交查看，渐进式批改即可

应用 husky 能够帮忙咱们在提交前运行一些查看代码品质或进行代码测试的脚本。

装置过程大略是 npx husky-init 初始化后装置 husky 依赖，在 package.json 文件增加 lint 命令。

{
  "scripts": {
    "lint": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src",
    "fix": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src --fix",
    "prepare": "husky install"
  }
}

而后在 .husky 文件夹中的 pre-commit 文件增加 npm run lint，即可在提交前运行 eslint，失败时不可提交代码。

一般来说一个团队齐全能够所有我的项目共用一套配置，间接复制配置文件共享就能跳过生成配置的步骤，更不便的还通过 npm 治理配置文件，像上面这样（eslint 同理）：

module.exports = {...require('@company/prettier-config'),
  semi: false,
}

ESLint 工作原理探讨

原文链接：https://ssshooter.com/2021-11…

关于前端:用-eslint-和-prettier-让跨-IDE-协作更舒服

TL; DR

场景

装置插件

vscode

webstorm

装置外围程序

初始化配置

eslint

prettier

其余问题

prettier 和 eslint 的抵触

主动格式化

提交查看

配置分享

拓展