1. eslint-config-tdym-ts

eslint-config-tdym-ts

eslint-config-tdym-ts

背景

我们的目标是:帮助团队在协作开发时保持代码规范与代码风格的一致性。通过配置化、工具化,更方便的共享经验,新加入的成员不用死背规范,更易于上手。经过多个项目的实践,我们结合社区方案与自身需求,针对 Vue 开发中的一些经验进行了归纳总结,并创建了此项目。

版本依赖

  • eslint ^5.0.0 || ^6.0.0
  • prettier >= 1.13.0
  • typescript >= 3.0.0

用法

安装依赖包以及上述版本依赖

 yarn add eslint-config-tdym-ts -D
# or
npm install eslint-config-tdym-ts -D

prettier 配置

在项目根目录中,添加 .prettierrc 文件,配置如下:

 {
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all",
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "ignore"
}
  • singleQuote: 在 js 中使用单引号风格、html 或 vue 模板中使用双引号;两者混用时不易产生混淆。
  • semi: 做一个无分号党
  • trailingComma: 对 git diff 友好,编码体验友好。
  • arrowParens: 总是带括号,方便增减参数、或解构。
  • htmlWhitespaceSensitivity: 参考issue#6061

git 配置

我们约定使用类 Unix 风格的换行符 \n 作为标准,统一的换行符,使得 git diff 更友好

因此,建议在项目中添加 .gitattributes 文件,配置如下:

* text=auto eol=lf

开发工具配置

打通整个开发流程,使得整个过程中的结果保持一致性,开发工具作为最为常见的场景,它能良好的运转至关重要。

vscode

用 vscode 开发 Vue 相关项目时,会安装插件 vetur 对 .vue 文件进行处理。vetur 默认使用 prettyhtml 对模板语法进行格式化,但它和使用 prettier 得到的不一致。因此,建议关闭工作区中 vetur 对 html 的格式化功能

 {
  "vetur.format.defaultFormatter.html": "none"
}

配置说明

实现初衷是希望最大程度的使用社区稳定的方案,减少维护和沟通成本,如下:

推荐配置

 const path = require('path')
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  root: true,
  extends: ['tdym-ts'],
  parserOptions: {
    project: path.resolve(__dirname, './tsconfig.json'),
  },
  rules: {
    'no-console': isProduction ? 'warn' : 'off',
    'no-debugger': isProduction ? 'warn' : 'off',
  },
}