您现在的位置是:首页 >其他 >在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint网站首页其他

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

科技艺术 2024-06-01 12:00:02
简介在 TypeScript + Vue 项目中配合 Prettier 使用 ESLint

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

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

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

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

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

依赖

安装

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"
}
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。