在 vscode 中使用 vue/nuxt linting 规则

Question

我使用 npx create-nuxt-app <project-name> 创建了一个新的 nuxt 应用程序，并选择使用 eslint 和 prettier。

我使用 vscode 打开项目目录并安装了 ESLint 和 Prettier - 代码格式化程序，以及 Vetur 扩展。

当我保存 .vue 文件时 vscode 格式化代码，但在某种程度上破坏了 nuxt 项目中的设置。

例如vscode转换

<div 
  class="test" 
  style="background: red">
  test
 </div>

到

<div class="test" style="background: red">test</div>

但这违反了vue/max-attributes-per-line规则。

如何设置 vscode 以使用 nuxt 项目的 linting 和 prettyfying 规则？

Answer 1

当使用 npx create-nuxt-app 开始一个新的 nuxt 项目时，检查 ESLint 和 Prettier 的 linting 选项并选择推荐的 jsconfig.json 选项。

然后执行以下操作：

安装额外的 npm 开发包

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

安装 VS 代码扩展
- 更漂亮
- ESLint
- 维图尔
- 格式切换（可选）
将您的工作场所设置 (.vscode/settings.json) 更改为以下内容：

    {
      "eslint.format.enable": true,
      "vetur.format.defaultFormatter.html": "prettier"
    }

您可以使用 Formatting Toggle 扩展来切换自动修复，或者如果您没有通过更改用户设置安装它：

    {
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    }

更改您的 .prettierrc 文件（可选）

{
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "endOfLine": "lf"
}

Answer 2

安装扩展：

Vue Vue 2 片段查看维图尔 ESLint

转到文件 > 首选项 > 设置并编辑用户设置文件，添加以下配置：

{
  ...... ,

  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
}

使用此配置，VSCode 将对以下三种文件类型执行验证：vue、HTML 和 JavaScript。现在返回 src/App.vue 文件并在 Windows 上按 ctrl+alt+f 或在 Linux 上按 ctrl+shift+i 或在 Mac 上按 ctrl+options+f OS 执行代码的格式化。 ESLint 将验证代码并在屏幕上显示一些错误。

任何错误都可以自动更正，无需手动更正每个错误。为此，您可以

按

ctrl+shift+p

和select

ESLint：修复所有问题

在 vscode 中使用 vue/nuxt linting 规则

use vue/nuxt linting rules in vscode

eslint

vue.js

visual-studio-code

nuxt.js

prettier