Может кто-нибудь объяснить, как все инструменты форматирования работают в VS Code? - PullRequest
Новая
       21

Может кто-нибудь объяснить, как все инструменты форматирования работают в VS Code?

1 голос
/ 15 марта 2019

Справочная информация

Я только начинаю изучать response.js и узнаю, что многие люди используют более симпатичные и eslint для форматирования своего кода.Но после того, как я установил свои собственные, основанные на онлайн-руководствах, произошли проводные вещи.Он может правильно форматировать код при сохранении файла, но не при ручном запуске функции форматирования (Shift + опция + F).Он отформатирует файл проводным способом, который eslint выдаст мне ошибки.

Вот настройки vscode, которые я использую: 

"editor.formatOnSave": true,
"[javascript]": {
    "editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": [
    "js"
],
"editor.detectIndentation": true,
"editor.tabSize": 2,

, и у меня также есть файл .eslintrc 

{
"extends": ["react-app", "plugin:prettier/recommended"],
}

и файл .prettierrc 

{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxBracketSameLine": true
}

Я предполагаю, что комбинация клавиш vscode (Shift + опция + F) не использует ту же конфигурацию (или даже не совпадает с ней)инструмент) как autoFixOnSave.Но я также не понимаю, как эти инструменты работают и интегрированы вместе, и какой из них переопределяет.Может кто-нибудь помочь?

Ответы [ 2 ]

1 голос
/ 15 марта 2019

Почему вы отключаете js для красивее?

Знаете ли вы, что Prettier безупречно интегрируется с ESLint?

Взгляните на эту статью: Красивее: интеграция с ESLint

В настройках вашего пользователя / рабочей области просто добавьте: 

  "files.autoSave": "off",
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  },
  "eslint.options": {
    "extensions": [".js", ".jsx"]
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

Также рекомендуется иметь .editorconfig в корневой папке: 

# http://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

И, наконец, в своем файле .eslintrc добавьте: 

"extends": ["react-app", "plugin:prettier/recommended", "prettier/react"],

Проверьте eslint-plugin-Reaction для проверки реакции.

0 голосов
/ 15 марта 2019

Я не смотрю на версию VS кода для Mac, но я думаю, что горячая клавиша должна быть Shift + Option + F

Редактировать: я обычно отключаю форматтер javascript по умолчанию в vscode, потому что он может конфликтовать смои правила eslint, которые не позволяют eslint правильно отформатировать мой код.

ESLint имеет свою собственную команду Fix, которая не имеет горячей клавиши в моей настройке, но у меня есть eslint.autoFixOnSave: true.

Prettier не подключается к внутренней команде формата vscode.У этого также есть своя собственная настроенная команда.Горячая клавиша по умолчанию для запуска более красивого формата для большинства доступных расширений красивее - CMD + Shift + P -> Format Document, но сработает при сохранении, если editor.formatOnSave равно true.

...