写点什么

手把手教你使用 ESLint + Prettier 规范项目代码

作者:CRMEB
  • 2022 年 5 月 16 日
  • 本文字数:2824 字

    阅读完需:约 9 分钟

手把手教你使用 ESLint + Prettier 规范项目代码

相信小伙伴们在小学时都经历过小平头时代,那时的教务处主任天天学校门口巡视,同学们更是一个个心惊胆战。那时的我们就好比一行行代码,如果发型不一,上来就是两…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

// .eslintrcmodule.exports = {  plugins: ['prettier'],  // prettier 一定要是最后一个,才能确保覆盖  rules: {    'prettier/prettier': 'error',  },  extends: ['plugin:prettier/recommended'],};
复制代码

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

// .eslintrcmodule.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.jsmodule.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-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27
复制代码

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

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

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

 

开源不易,Star 以表尊重,感兴趣的朋友欢迎 Star,提交 PR,一起维护开源项目,造福更多人!

用户头像

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
手把手教你使用 ESLint + Prettier 规范项目代码_CRMEB_InfoQ写作社区