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

导言

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    //关闭末尾加分号
  }

未完待续

你可能感兴趣的:(前端,Vuejs,js,javascript,vue.js,eslint,prettier,前端)