Visual Studio Code форматирует код с двойными кавычками, хотя стиль кода Линтера требует одинарных кавычек - PullRequest
Новая
       62

Visual Studio Code форматирует код с двойными кавычками, хотя стиль кода Линтера требует одинарных кавычек

0 голосов
/ 24 марта 2020

Я разрабатываю с Nest Js и VueJs и использую стиль кода, настроенный через CLI. Поэтому Nest использует свой собственный стиль кода с TSLint и для VueJs я хочу использовать стиль кода AirBnb.

На основе моих текущих настроек расширения VS C

Я использую ESLint, Vetur и Prettier со следующими настройками 

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": true,
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier-tslint",
    "prettier.singleQuote": true
}

К сожалению VS C обновляет мой код Javascript из одинарных к двойным кавычкам. Я хочу отформатировать свой код в соответствии с настроенным стилем кода, будь то простой NodeJs, Nest Js, Angular, React, Vue, ...

Кто-то может сказать мне, как правильно настроить редактор?

1 Ответ

1 голос
/ 24 марта 2020

Не используйте eslint с prettier, большинство вещей будет конфликтовать. Вот настройка, которая работает для меня отлично, я использую eslint-airbnb: 

{
  "window.zoomLevel": 2,
  "workbench.colorTheme": "Solarized Dark",
  "editor.tabSize": 2,
  "editor.wordWrapColumn": 100,
  "workbench.settings.editor": "json",
  "workbench.settings.useSplitJSON": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "cSpell.userWords": [
    "Dropdown",
    "vuex"
  ],
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.grammar.customBlocks": {
    "page-query": "graphql",
    "static-query": "graphql"
  },
  "explorer.confirmDragAndDrop": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

В root папке ./.eslintrc.json

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

Если вы все еще хотите использовать красивее, то в папке root создайте файл ./.prettierrc

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
}

На случай, если вы этого еще не сделали, установите следующие расширения vs-code:

...