返回

VS Code 中如何使用 Vue CLI 4、ESLint 和 Stylelint 自动修复 TypeScript 代码？

vue.js

在 VS Code 中使用 Vue CLI 4、ESLint、Airbnb 规则、TypeScript 和 Stylelint 自动修复代码

引言

作为一名经验丰富的程序员，我热衷于找到一个“圣杯”工具集，可以在 VS Code 中为 TypeScript 编写的 Vue 应用程序自动修复代码。配置 ESLint、Airbnb 规则和 Vetur 作为 linter 成为一项艰巨的任务，而 Prettier 进一步增加了复杂性。

但是，随着 Vue CLI 4、ESLint 6 和 VS Code 的最新更新，我们现在可以实现这种理想的设置，让自动修复变得轻而易举。

步骤

安装必要软件包

npm install -g @vue/cli eslint eslint-plugin-airbnb-base stylelint

创建 Vue 项目并安装 TypeScript

vue create my-project
Manually select features:
✔ TypeScript

安装 ESLint 扩展和 Stylelint 插件

ext install dbaeumer.vscode-eslint
ext install stylelint

配置 ESLint 和 Airbnb 规则

{
  "extends": [
    "airbnb-base",
    "airbnb-typescript/base",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
  ]
}

配置 Stylelint

{
  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"]
}

启用保存时自动修复

在 VS Code 设置中，启用“保存时运行代码操作”。

运行并修复代码

保存 .eslintrc.js 和 .stylelintrc.js 文件，ESLint 和 Stylelint 将自动修复代码。

结论

通过遵循这些步骤，你可以在 VS Code 中为 TypeScript 编写的 Vue 应用程序配置一个全能代码工具集，包括自动修复，从而简化开发过程，提高代码质量。

常见问题解答

1. 我需要使用 Prettier 吗？

不需要，ESLint 6 现在作为 formatter，消除了 Prettier 的必要性。

2. 我可以使用 Vetur 吗？

仍然可以使用 Vetur，但它不是必要的，因为 Stylelint 可以处理大多数样式检查和修复。

3. 我可以自定义 ESLint 和 Stylelint 规则吗？

是的，你可以通过修改 .eslintrc.js 和 .stylelintrc.js 文件来自定义规则。

4. 如何更新工具集？

定期更新 Vue CLI、ESLint、Stylelint 和其他相关软件包以获取最新功能和修复。

5. 我还可以使用哪些其他工具？

其他有用的工具包括 Vetur（提供 Vue 特定支持）、EditorConfig（确保一致的编码风格）、prettier（处理代码格式化）和 Git pre-commit hooks（在提交代码之前自动运行检查）。