在我安装并启用了ESlint和Prettier的Nuxt应用程序中,我切换到Visual Studio Code。

当我打开一个.vue文件并按CMD+ Shift + P并选择格式化文档时,我的文件根本没有被格式化。

我的.prettierrc设置:

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

我有这么多源代码行,所以我不能手动格式化它们。我做错了什么?


当前回答

在我的案例中,我必须做到以下几点:

从命令行安装prettier (npm Install——save-dev——save-exact prettier-plugin-custom) 重载VSCode

voilà,一切都开始运转了。

提示: 为了确保安装良好,我检查了版本:

npx prettier --version

其他回答

如何通过VScode的ESlint插件格式化你的代码

好吧,与其给出如何使用VScode的Prettier扩展的指南,我更愿意解释如何依赖ESlint并拥有两个世界:检查你的代码是正确的(ESlint),然后格式化它(Prettier)。

这样做的好处是什么?

not forcing your entire team to use VScode with the Prettier extension, maybe some prefer Vim, IntelliJ's Webstorm, Emacs etc... A tool-agnostic solution is IMO always better. I think that linting your code is more important that formatting it, but if you have both extensions working at the same time, you may have conflicts between the formatting and the linting. your hardware will struggle less, if you have less extensions running (mainly because it can stop the conflicts) using an ESlint + Prettier combo will strip the need to have a specific personal configuration aside of the codebase (untracked). You'll also benefit from having Vue/Nuxt specific ESlint rules and a simpler/more universal configuration. an ESlint configuration can be configured to be run before a commit, in a CI/CD or anywhere really.

如何实现这种设置?

让我们首先安装ESlint扩展,并且只安装它,不要安装更漂亮的扩展。

还没有安装Vetur ?

我强烈推荐ve2应用程序使用它(Nuxt目前正在运行),你可以在下面找到它。它将允许快速简单地ESlint (+ pretty)任何.vue文件。


完成后,使用ctrl + shift + p (Windows/Linux)或cmd + shift + p (Mac)访问命令面板,并键入Preferences: Open Default Settings (JSON)

在那里,你应该有这样的东西

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

如何尝试您的配置现在正在工作?

看看我的解决方案是否有效,请下载这个Github回购,获得最新的稳定Node版本(例如:14)并运行yarn以使其工作。否则,只需打开VScode。 这个回购也可以用来通过检查我的文件来检查您的配置是否正确!

然后,你可以访问任何.js或.vue文件,并看到那里的问题(命令面板:问题:关注问题视图)。js和/pages/index。Vue是很好的例子,这里是索引。vue文件。

你可以看到,我们确实有几个东西可以被pretty修复,但我们也有一个eslint(vue/require-v-for-key)错误。顺便说一句,解决方案可作为下面的评论。

PS:如果你想有内联ESlint警告/错误,如截图所示,你可以安装Error Lens,如果你想摆脱错误,这是一个超级神奇的扩展。

保存这个文件,你应该看到每一个自动修复的事情都为你做了。通常它主要是漂亮的问题,但有时也可以是ESlint。因为我们有来自Nuxt的ESlint规则,你也会得到一些很好的实践!

塔达,起作用了!如果不是,请阅读我答案后面的部分。

如果你想创建一个全新的项目

你可以运行npx create-nuxt-app my-super-awesome-project,并在那里选择一些东西,最重要的是检测工具:Eslint + Prettier(点击空格选择其中之一)。

警告:到今天为止,要让ESlint + Prettier正常工作,还需要额外的步骤,如Github所示。修复应该很快就会发布,然后下面的配置将不再需要!

要解决这个问题,运行yarn add -D eslint-plugin-prettier,并仔细检查你的.eslintrc.js文件是否如下

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended', // this line was updated
    'prettier'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

然后,您可以让它完全正常工作,如上所述。保存文件,它应该会运行ESlint,然后一个接一个地变得更漂亮!


如果你还有问题

尝试再次使用命令面板和ESLINT:重启ESLINT服务器或甚至开发人员:重新加载窗口 如果你需要帮助,欢迎留言或联系我

我没有使用Vue,但遇到了同样的问题。

我已经设置好了

编辑器:用于更漂亮的默认格式化器 编辑器:格式保存为true 我已经有了。eslintrc.js和。prettierrc文件 但是什么都不管用。

我的问题的解决方案是,我已经正确设置,除了我需要:

Command + Shift + p 输入格式文件 select Configure Default Formatter… 选择pretty作为默认值。

我不知道为什么编辑器:保存的格式设置为true是不够的。 我需要使用上面的步骤选择默认格式化器,这样它就可以工作了。

这不是pretty本身的问题,而是pretty - VSCode, VSCode扩展的问题。根据Vue的文档,Vue格式默认是禁用的:

更漂亮。disableLanguages(默认值:["vue"]) 要禁用此扩展的语言id列表。需要重新启动。注意:禁用父文件夹中启用的语言将阻止格式化,而不会让任何其他格式化程序运行

在这种情况下,启用您应该设置“更漂亮。disableLanguages”:[]。由于这是一个扩展配置,你应该在VSCode设置文件,而不是。pretierrc。

在我的例子中,我使用一个不存在的配置文件(见下面的屏幕截图)配置得更漂亮。这很难找到,因为没有任何错误消息,但漂亮的只是没有工作。也许这也能帮助到别人。

这里我的漂亮配置工作在vue.js文件,typescript文件和json文件。

arrowParens: 'always'
bracketSpacing: true
endOfLine: 'crlf'
htmlWhitespaceSensitivity: 'css'
insertPragma: false
jsxBracketSameLine: false
jsxSingleQuote: true
overrides:
- files: '*.json'
  options:
    semi: true
    parser: 'json'
parser: 'babel'
printWidth: 120
proseWrap: 'preserve'
quoteProps: 'truepreserve'
requirePragma: false
semi: false
singleQuote: true
tabWidth: 8
trailingComma: 'es5'
useTabs: true
vueIndentScriptAndStyle: 

不要忘记更新你的vscode设置

{
"extensions.ignoreRecommendations": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"vetur.format.options.useTabs": true}

那是所有人的事!