Prettier和Eslint在前端项目中的配置

首发
现在的项目前端都很很庞大,往往也是多人合作开发,对代码的格式规范或代码风格要求尤其重要,一个看着统一整齐的代码格式,也能在实际开发中起到事半功倍的作用,起码能起到心情愉悦的作用。

本文结合自身在项目开发中的配置,记录一下Eslint和Prettier工具的配置和部分可能会遇到的问题,如有错误,请指正。

Eslint和Prettier的区别

两者的区别简单一句话介绍就是:Eslint或其他lint类工具主要功能是代码格式和代码质量的校验,而Prettier主要是代码格式的校验。

Eslint

Eslint是一个开源的 JavaScript 的 linting 工具,使用 espree 将 JavaScript 代码解析成抽象语法树 (AST),然后通过AST 来分析我们代码,从而提供两种提示:

  • 代码质量问题:使用方式有可能有问题(problematic patterns)
  • 代码风格问题:风格不符合一定规则 (doesn’t adhere to certain style guidelines)
  • 代码质量规则 (code-quality rules)
  • no-unused-vars
  • no-extra-bind
  • no-implicit-globals
  • prefer-promise-reject-errors
  • 代码风格规则 (code-formatting rules)
  • max-len
  • no-mixed-spaces-and-tabs
  • keyword-spacing
  • comma-style

Eslint主要解决代码质量问题。

Prettier

Prettier 声称自己是一个有主见的代码格式化工具,Prettier会处理格式规则,但可能不会使你完全满意,可也不会丑,而且可以通过 .prettierrc等文件修改

上面介绍中可以看出,实际项目开发中就可以使用Eslint+Prettier来规范项目中的代码质量和风格,只是配置会有些麻烦。

ESLint 与 Prettier配合使用

首先是在项目文件夹下安装这两个工具:

npm install prettier eslint -D

项目根目录下创建配置文件 eslintrc.js 和 .prettierrc.js。

.eslinrc.*

其中eslintrc.js可以通过命令行创建

npx eslint --init
# 同 ./node_modules/.bin/eslint --init
# 或
npm init @eslint/config
#或使用yarn
yarn create @eslint/config

此命令会根据选择自动安装部分依赖,并且可以选择Eslint文件支持的几种格式:

  1. JavaScript - 使用 .eslintrc.js 或者 .eslintrc.cjs然后输出一个配置对象。
  2. YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  3. JSON - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
  4. (弃用) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。
  5. package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。

以上优先级顺序从1~5依次降低

例:

/* 
$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · javascript
*/
// 上面的回答对应下面的 .eslint.js 文件
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "standard"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

.prettierrc.js

配置可如下设置:

module.exports = {
  "printWidth": 80, //一行的字符数,如果超过会进行换行,默认为80
  "tabWidth": 2, //一个tab代表几个空格数,默认为80
  "useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号,默认为false,使用双引号
  "semi": true, //行位是否使用分号,默认为true
  "trailingComma": "none", //是否使用尾逗号,有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
  "parser": "babylon" //代码的解析引擎,默认为babylon,与babel相同。
}

Prettier+ESLint检测

eslint-plugin-prettier插件会调用prettier对代码风格进行检查

npm install eslint-plugin-prettier -D

然后修改 .eslintrc.* 配置文件

{
  //...
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
  //...
}

原理是 以 ESLint 规则的方式运行 Prettier,通过 Prettier 找出格式化前后的差异,prettier进行差异标记,借助ESLint的autofix功能,在保存代码的时候,自动将抛出error的地方进行fix。

插件冲突

通过使用eslint-config-prettier配置,能够关闭与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保,这个配置在extends的最后一项

//.eslintrc.*
{
  //...
  extends: [
    // ...
    "prettier",
  ],
  // ...
}

Vscode配置

在vscode中安装Eslint和Prettier插件,然后进入settings.json,进行配置:

建议在工作区进行编辑设置,项目中会出现类似如下文件:
.vscode/
|- extensions.json
|- README.md
|- settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".tsx"
    ]
  },
}

editor.codeActionsOnSave: 在保存代码时自动格式化,
eslint.validate: 如果需要支持其他类型,可在此处添加,如vue等

多层级项目不提示

当项目文件不是在一级文件夹下,而是有多层级,这种情况下,Eslint就不会对检测到的语法进行标红提示,此时需要修改Eslint的工作目录区eslint.workingDirectories,把对应的项目地址添加进去就可以了。

"eslint.workingDirectories": [
  "./admin",
  "./service"
],

使用luoshen

项目代码的规范配置是一件耗时费力的事,而且不一定符合所有的人的习惯,也关乎团队合作中的代码质量问题。
luoshen 是包含了 Prettier,ESLint,StyleLint 的配置文件合集,并可以搭配Husky对commit-msg进行校验,lint-stage进行格式校验。可以精简配置,能节约很大一部分时间。并能支持React项目、Vue项目及TypeScript。使用方式参见官方文档。

首发

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vscode启动前端项目vue项目,首先需要确保本地已经安装了node.js环境和vscode软件。然后按照以下步骤进行操作: 1. 打开vscode软件,并打开对应的vue项目的文件夹。 2. 确认项目的启动命令,可以查看项目配置文件。有些项目的启动命令是npm run dev,有些是npm run serve。 3. 在vscode的终端输入相应的启动命令,然后按回车键。这样就可以启动项目了。 如果在启动项目的过程遇到了缺少插件的问题,可以在vscode的扩展点击筛选器扩展选推荐,然后安装缺少的插件。可以参考以下配置文件的插件推荐列表: ``` { "recommendations": \[ "octref.vetur", "rvest.vs-code-prettier-eslint", "lihuiwang.vue-alias-skip", "dbaeumer.vscode-eslint" \] } ``` 希望以上步骤对您有帮助!\[1\]\[2\] #### 引用[.reference_title] - *1* [Vscode软件,如何启动vue项目](https://blog.csdn.net/python113/article/details/121321777)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue项目配置vscode](https://blog.csdn.net/qq_40190624/article/details/125499013)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue项目导入vscode项目,运行项目,vue开发必备软件vscode,nodejs](https://blog.csdn.net/plqwf19880902/article/details/122577245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值