带有 Typescript 的 Nuxt3 中的 ESLint + Prettier

Question

大家好，

在 Nuxt 3 中使用 typescript 几乎是现在的标准，并且强制执行一致的样式和 linting 也是一种很好的做法。但是，我发现设置它非常令人沮丧且非常复杂。我读过很多关于这个问题的文档/主题，例如：prettier-eslint、eslint-plugin-prettier 和 eslint-config-prettier 之间有什么区别？ 人们如何设置它有很多变化。

经过一些研究，我最终得到了

eslint

@nuxtjs/eslint-config-typescript

（对于nuxt相关的规则和打字稿，我相信任何

vue

相关的规则都包括在内？）和

eslint-config-prettier

（这是为了禁用

prettier

相关

eslint

中的规则以避免冲突）

所以这是我的

package.json

"devDependencies": {
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^8.8.0",
    "prettier": "^2.8.7",
  },

.prettierrc

{
    "printWidth": 110,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none"
}

.eslintrc

{
    "extends": ["@nuxtjs/eslint-config-typescript", "prettier"],
    "rules": {}
}

工作流程：保存时更漂亮的格式然后 lint --fix 这个设置是否满足：

• 使用

  eslint

  来检查代码，使用

  prettier

  来设置代码样式并避免冲突
• 允许两者的自定义规则
• 具有对

  nuxt

  vue

  和

  typescript

的默认规则支持

再次对提出这个古老的问题表示歉意，希望这可以帮助其他人避免将来发生 bikeshedding，因为配置这个并不好玩

谢谢

我尝试了提供的配置文件，并希望它涵盖所有 linting/样式需求并允许自定义规则。

似乎工作正常，但我想征求第二意见。