欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

eslint和prettier配置避免冲突并统一代码风格,使用tab缩进

程序员文章站 2022-05-31 19:56:36
...

导言

eslint和prettier是前端开发中两款非常强大的代码检查和格式化工具,但强大也意味着这两者经常发生冲突。对eslint和prettier在开发前进行协同完美的配置是相关重要的,可以避免冲突等麻烦,简化美化开发过程,确立团队或个人的开发风格。
以下修改为个人风格总结所得,读者可根据自己需求增加减。

eslint

配置项目根目录的.eslintrc.js文件,下面代码都添加在rule块中

  • 修改为tab缩进:在rule下面添加"indent": ["error", "tab"]或你也可以关闭缩进检测功能"indent": ["off"]
    (关闭缩进检测,在使用cli脚手架新建项目时,脚手架默认以空格缩进新建文件的情况下,极为有用。因为旧代码是脚手架的空格缩进,新代码是个人的tab缩进,使用缩进检测将导致新旧代码要统一。)
  • 关闭不知所谓的字符串引号限制:"quotes": ["off"]
  • 避免与prettier的冲突(函数后强制空格):'space-before-function-paren': 0

prettier

这是一个opinionated code formatter,意味着这个格式化工具很“拽”,可供修改的项目较少,他说什么你就得按着他说的来做。

请在项目根目录的package.json中添加如下块

"prettier": {
    "eslintIntegration": true,   //与eslint整合
    "semi": false    //关闭末尾加分号
  }

未完待续