Question

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

我使用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

在安装vscode并启动nuxt项目之后：

安装Vetur和ESLint vscode扩展。
将以下内容添加到您的工作区设置中

请勿安装更漂亮的扩展程序

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

如果您有"editor.formatOnSave": true,

将以下内容添加到您的工作区设置中：

  "[vue]": {
    "editor.formatOnSave": false
  },

您可能需要保存多次，才能完全应用起毛规则。

Answer 2

安装扩展名：

Vue Vue 2片段 Vue Peek 威图 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 OS上按ctrl + options + f执行代码格式化。 ESLint将验证代码并在屏幕上显示一些错误。

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

按

ctrl + shift + p

然后选择

ESLint：解决所有问题

在vscode中使用vue / nuxt linting规则

2 个答案: