乐趣区

关于eslint:手把手教你使用-ESLint-Prettier-规范项目代码

jiezi

置信小伙伴们在小学时都经验过小平头时代，那时的教务处主任天天学校门口巡视，同学们更是一个个大惊失色。那时的咱们就好比一行行代码，如果发型不一，上来就是两…55555 不说了…
所以说对立款式更有助于咱们更对立的治理，也会使咱们少犯错误，这时 ESlint 站进去了，它就是教务处主任的化身，会将咱们的不拘一格的发型 (代码) 对立起来，尽管验证过得代码不肯定完满，然而肯定绝对标准。

什么是 ESLint?
ESLint 是一个用来辨认 ECMAScript 并且依照规定给出报告的代码检测工具，应用它能够防止低级谬误和对立代码的格调。如果每次在代码提交之前都进行一次 eslint 代码查看，就不会因为某个字段未定义为 undefined 或 null 这样的谬误而导致服务解体，能够无效的管制我的项目代码的品质。

ESlint 的次要作用

  1. 代码品质问题：应用 / 编写的形式有可能有问题 (problematic patterns)
  2. 代码格调问题：格调不合乎肯定规定 (doesn’t adhere to certain style guidelines)

就好比有些同学喜爱应用 tab 缩进，有些喜爱空格，有些喜爱 2 个空格，有些喜爱 4 个。这就难办了，到底听谁的？

最初通过一番笔战，选定 2 个空格作为规范。于是乎咱们在根目录创立了配置文件.eslintrc 并写入了咱们的伦果

// .eslintrc    
{"indent": ["error", 2]    
}

为了大家的进步大家的开发体检及提交的一致性，你还‘威逼利诱’的让大家下载了 vscode 插件，没有通过 ESLint 校验的代码 VSCode 会给予下滑波浪线提醒，揭示他好好查看。

为了保障提交代码的十拿九稳，你还增加一个 pre-commit 钩子 eslint –ext .js src，确保没有通过 lint 的代码不会被提交。

最初还要求了大家应用 eslint –fix 将之前的所有代码，一键批改成了新标准下的代码格局。

什么是 Prettier?
一个风行的代码格式化工具的名称，它可能解析代码，应用你本人设定的规定来从新打印出格局标准的代码。

Tony 老师认为发型很重要，Prettier 也这么认为。Prettier 认为格局很重要，然而格局好麻烦，我来帮你们定好吧。简略来说，不须要咱们再思考到底是用 single quote，还是 double quote 这些乱起八糟的格局问题，Prettier 帮你解决。最初的后果，可能不是你齐全称心，然而，相对不会丑。

Prettier 接管了两个问题其中的代码格局的问题，而应用 Prettier + ESLint 就完完全全解决了两个问题

当然，教务处主任和 Tony 老师对发型的了解‘唇齿相依’，所以咱们还须要对他们进行一番深刻交换。上面就让咱们一起开始吧！

注释
依赖装置
在你的我的项目中装置以下依赖，这些依赖只需装置在开发环境配置中

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

vscode 插件装置
装置 vscode 插件 ESLint 和 Prettier – Code formatter

如果心愿在每次保留时主动格式化代码能够加上以下配置

我的项目下创立 .vscode/settings.json 配置 (也能够配置到全局)
配置每次报错主动 ESLint 查看规定并格式化

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

增加配置文件
增加配置文件 .eslintrc.js

// .eslintrc
module.exports = {plugins: ['prettier'],  // prettier 肯定要是最初一个，能力确保笼罩
  rules: {'prettier/prettier': 'error',},
  extends: ['plugin:prettier/recommended'],
};

下面配置在运行报错时可选以下配置

// .eslintrc
module.exports = {plugins: ['prettier'],
  parser: "vue-eslint-parser",
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    parser: 'babel-eslint',
  },
  rules: {
    'prettier/prettier': 'error',
    "parser": 0
  },
  extends: ['plugin:prettier/recommended'],
};

以下是我的集体配置，仅供参考

创立配置文件 .prettierrc.js

//.prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 应用 2 个空格缩进
  tabWidth: 2,
  // 不应用 tab 缩进，而应用空格
  useTabs: false,
  // 行尾须要有分号
  semi: true,
  // 应用单引号代替双引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不应用单引号，而应用双引号
  jsxSingleQuote: false,
  // 开端应用逗号
  trailingComma: 'all',
  // 大括号内的首尾须要空格 {foo: bar}
  bracketSpacing: true,
  // 箭头函数，只有一个参数的时候，也须要括号
  arrowParens: 'always',
  // 每个文件格式化的范畴是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不须要写文件结尾的 @prettier
  requirePragma: false,
  // 不须要主动在文件结尾插入 @prettier
  insertPragma: false,
  // 应用默认的折行规范
  proseWrap: 'preserve',
  // 依据显示款式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符应用 lf
  endOfLine: 'lf',
};
增加命令
  // package.json 中 scripts 中退出
  "lint": "eslint --ext .js,.vue src",  // 查看我的项目是否合乎 eslint 规定
  "prettier": "prettier --write .",     // 一键格式化所有文件

疏忽文件
当然，在非凡状况下，比方某个学生是校长的儿子，女儿之类的，教务处长总会睁一只眼，闭一只眼。所以咱们也须要进行一些选择性的漠视。

eslint 疏忽文件

.eslintignore

prettier 疏忽文件

.prettierignore

疏忽规定与.gitignore 统一

报错及异常情况
Tip1: 执行 npm run lint 报 ‘prettier/prettier’: context.getPhysicalFilename is not a function
移除以下依赖，我的项目中不存在的就不必移除

npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier

装置指定版本的依赖

npm i -D @vue/cli-plugin-babel@4.4.6 @vue/cli-plugin-eslint@4.4.6 @vue/eslint-config-prettier@7.0.0 eslint@7.15.0 eslint-plugin-prettier@3.4.1 eslint-plugin-vue@7.2.0 prettier@2.5.1
Tip2: 执行 npm run lint 报 # Vue error: Parsing error: Unexpected token <
在.eslintrc.js 中退出
parser: 'vue-eslint-parser'

Tip3 执行 npm run dev 报 Cannot find module 'core-js/modules/es.array.concat.js'
在 babel.config.js 文件中的 presets 增加 userBuiltIns

module.exports = {presets: [['@vue/app',{ useBuiltIns: "entry"}]],
};

源码附件曾经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-b…
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

如果百度云链接生效了的话，请留言通知我，我看到后会及时更新～

开源地址
码云地址：
http://github.crmeb.net/u/defu

Github 地址：
http://github.crmeb.net/u/defu

开源不易，Star 以表尊重，感兴趣的敌人欢送 Star，提交 PR，一起保护开源我的项目，造福更多人！

退出移动版