您现在的位置是:首页 >其他 >在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint网站首页其他
在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint
简介在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint
在 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"
}
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。