首页 前端知识 【ESLint】在 TypeScript Vue 项目中配合 Prettier 使用 ESLint

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

2024-10-17 10:10:54 前端知识 前端哥 867 281 我要收藏

在 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"
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19092.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!