在 Vue 项目中使用 VScode 正确设置 Eslint Airbnb答案

【问题标题】：Correctly setup Eslint Airbnb with VScode in Vue project在 Vue 项目中使用 VScode 正确设置 Eslint Airbnb
【发布时间】：2020-04-18 16:12:07
【问题描述】：

这是我没有 linting 的 Vuejs 代码。

我跑完之后

npm run lint --fix

代码是这样的

但我再次做了一些更改并按 Control + C。它被格式化为旧代码并返回相同的 linting 错误。

我认为当我按下 Control + C 时我的代码会自动格式化。

这是我的 Vue 项目 eslint.rc 文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

我没有在 VScode 上安装 pretier 插件。但是我安装了Vueter插件和Eslint插件。

我的目标是使用 Eslint Airbnb 规则格式化我的 Vuejs 代码。当我保存代码时。现在它弄乱了代码。我该如何解决这个问题？

【问题讨论】：

标签： vue.js visual-studio-code eslint prettier

【解决方案1】：

为我添加

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

对我的 VS Code 设置 (Preferences: Open Settings (JSON)) 有所帮助。另外：不要忘记重新加载/重新启动 VS Code。

【讨论】：