代码之家 › 专栏 › 技术社区 › waspinator

在vscode中使用vue/nuxt linting规则

prettier nuxt.js eslint visual-studio-code vue.js

waspinator · 技术社区 · 6 年前

我使用创建了一个新的nuxt应用程序 npx create-nuxt-app <project-name>

.vue

例如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和prettyping规则?

1 回复 | 直到 6 年前

waspinator 5 年前

使用启动新nuxt项目时 npx create-nuxt-app jsconfig.json 选项

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

- 维图尔
- 格式切换(可选)
更改您的工作场所设置( .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"
}

Rabbid76 5 年前

安装扩展插件:

VUE2代码段 Vue Peek 维图尔埃斯林特

转到文件>偏好>设置并编辑用户设置文件,添加以下配置:

{
  ...... ,

  "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
    }
  ],
}

任何错误都可以自动更正,无需手动更正每个错误。要做到这一点,你可以

按

控制键 转移 +

选择

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

4 月前

Ben Foltz · 更新/删除递归子组件

5 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

5 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

6 月前

CentralDev · 如何导出和导入js文件?

9 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

9 月前

gespinha · 当元素不再可见时,如何更改ref元素?

10 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

10 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

11 月前