在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint
在软件开发中，编码风格是一种规范化的约定，用于定义代码的格式，样式和结构。统一编码风格有以下几点好处：
- 提高代码可读性：统一的编码风格使代码更易读，减少了代码的歧义和误解。
- 方便合作开发：当多个开发人员在同一个项目中工作时，统一编码风格可以减少代码的冲突和错误，提高协作开发的效率。
- 降低维护成本：在软件开发过程中，代码需要经常进行维护和修改。如果使用统一的编码风格，可以减少维护成本并提高代码的可维护性。
- 提高代码质量：统一编码风格可以强制执行一些最佳实践，例如代码注释和排版等，可以提高代码的质量。
我使用的是《阿里巴巴前端规约》配套的 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"
}
