【ESLint】在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint

在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint

在软件开发中，编码风格是一种规范化的约定，用于定义代码的格式，样式和结构。统一编码风格有以下几点好处：

1. 提高代码可读性：统一的编码风格使代码更易读，减少了代码的歧义和误解。
2. 方便合作开发：当多个开发人员在同一个项目中工作时，统一编码风格可以减少代码的冲突和错误，提高协作开发的效率。
3. 降低维护成本：在软件开发过程中，代码需要经常进行维护和修改。如果使用统一的编码风格，可以减少维护成本并提高代码的可维护性。
4. 提高代码质量：统一编码风格可以强制执行一些最佳实践，例如代码注释和排版等，可以提高代码的质量。

我使用的是《阿里巴巴前端规约》配套的 ESLint 可共享配置。

ESLint 规则包请参见 《阿里巴巴前端规约》

依赖

• eslint-config-ali
• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin
• eslint-plugin-import
• eslint-import-resolver-typescript
• vue-eslint-parser
• eslint-plugin-vue
• prettier
• eslint-config-prettier
• eslint-plugin-prettier

安装

npm i -D eslint-config-ali @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript vue-eslint-parser eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier

配置

创建 .eslintrc 文件

{
  "extends": ["eslint-config-ali/typescript/vue", "prettier"]
}

创建 .prettierrc 文件

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

用 Prettier 格式化所有文件

npx prettier --write .

针对 Vue 配置的 Prettier

我的配置

{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always",
  "singleAttributePerLine": true,
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "ignore"
}