Переход от нуля до опытного пользователя за одно быстрое копирование и вставку

Я недавно установил VS Code Settings Sync; и, потратив значительное количество времени на разрешение конфликтов слияния, я подверг сомнению и вновь подтвердил ценность многих из этих параметров. Чтобы учесть, что VS Code не настраивает их по умолчанию по моему вкусу, я делюсь этой конфигурацией с ее обоснованием.

"editor.autoClosingBrackets": "never",
"editor.autoClosingQuotes": "never",
"html.autoClosingTags": false,
"javascript.autoClosingTags": false,
"typescript.autoClosingTags": false,

Автозаполнение кода часто преподносится как дар Божий программистам. Значение этого параметра, вероятно, зависит от того, насколько быстро вы печатаете. Со скоростью более 2 слов в секунду автозаполнение часто завершается медленнее, чем моя собственная рука - мой <b></b> становится <b></</b>b>, поскольку автозаполнение удается вставить свой нежелательный код на полпути в мою.

Когда вам это нужно? Если вы обнаружите, что печатаете быстрее, чем функция автозаполнения вашего редактора, или считаете, что автозаполнение больше отвлекает, чем помогает.

"editor.fontFamily": "'Roboto Mono', monospace",

Придумайте себе собственный шрифт. Поскольку он широко распространен в Интернете, я устанавливаю все экземпляры Roboto локально и часто использую его в своих проектах. Мне это знакомое лицо, так что это мой выбор. У вас может быть любимый моноширинный шрифт, и вы можете указать его здесь.

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

Зачем тратить время на форматирование вручную? Линтеры - это волшебный инструмент, а линтеры, которые могут автоматически исправлять проблемы, - настоящие MVP счастливых команд. Часто экономьте. Ctrl + S для меня практически привычка через каждые пару строк, обычно нажимается после завершения раздела логики. Хотя код на этом этапе может быть непригодным для использования в производственной среде, он, скорее всего, сможет быть проанализирован линтером. Я могу кодировать скорость и позволять линтеру обрабатывать интервалы и другие придирки по ходу движения, оставляя след нечитаемой краткости, который быстро превращается в гостеприимную среду.

"editor.minimap.side": "left",

Возможно, это просто отмена личных предпочтений или чрезмерная индексация работы фронтенд-инженера, но я считаю, что потоки данных слева направо и сверху вниз лучше всего подходят для детализации изображения с более высокой детализацией. В этом случае мини-карта - это высшее изображение вашего кода, показывающее ад отступов и фрагменты логики. Сам редактор представляет собой увеличенный фрагмент мини-карты. Таким образом, если бы я использовал мини-карту, это было бы первым, с чем я взаимодействую, определяя местоположение кода, к которому я собираюсь перейти. Как только я определил чанк (например, импорт вверху, хуки посередине или JSX внизу компонента React), я перехожу к редактору. Этот пользовательский интерфейс от начала до конца поместит мини-карту слева.

"editor.rulers": [80],
"editor.wordWrap": "on",
"workbench.colorCustomizations": {
  "editorRuler.foreground": "#404040"
},

Пожалуйста, обеспечьте максимальную длину строки в вашем коде. Как только вы это сделаете, добавьте в помощь визуальную линейку! Мне нравится максимальная длина 80, исходя из идеальной длины чтения - 60 символов и с учетом отступов. Многие команды используют 120. Я бы не рекомендовал больше.

Перенос слов сохраняет ваш код на экране там, где он должен быть всегда, потому что у вас максимальная длина строки.

Правильный цвет переднего плана придает ему приятный вид. Сделайте его достаточно заметным, чтобы вы могли видеть, не напрягая глаз, но достаточно тонким, чтобы не отвлекать вас.

"eslint.nodePath": ".yarn/sdks",
"eslint.packageManager": "yarn",
"prettier.prettierPath": ".yarn/sdks/prettier/index.js",
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": ".yarn/sdks/typescript/lib",

Эти пути Yarn представляют конфигурацию Yarn 2 для ESLint, Prettier и TypeScript. Если вы не используете Yarn 2, не обращайте на это внимания.

"eslint.run": "onType",

Live результаты ESLint. Линия на ходу - это огонь. Единственная причина не использовать это, если ваш линтер отстает от вашего редактора, что может случиться с некоторыми плагинами или проектами.

"files.eol": "\n",
"prettier.endOfLine": "lf",

Я люблю Windows, но не люблю \r\n. Выключи это! Используйте везде стандартный \n.

"gitlens.defaultDateFormat": "YYYY-MM-DD @ HH:mm",
"gitlens.defaultDateShortFormat": "YYYY-MM-DD",

Если вы используете GitLens, подумайте об использовании стандартного формата даты ISO.

"html.format.endWithNewline": true,

Завершите ваши файлы новыми строками. Это предотвращает появление предупреждений git о том, что файл не заканчивается новой строкой. Простой.

"javascript.format.semicolons": "insert",
"typescript.format.semicolons": "insert",

Пропустили точку с запятой? Исправьте его до того, как ваш линтер найдет его. Встроен прямо в ваш редактор!

"prettier.configPath": ".prettierrc.json",
"prettier.requireConfig": true,

Если вы используете Prettier, скорее всего, это ваш путь к конфигурации. Это стандарт.

"typescript.surveys.enabled": false,

Пожалуйста, без спама, спасибо.

"workbench.startupEditor": "newUntitledFile",

Это заменяет надоедливое «Добро пожаловать в VS Code, десять страниц документации, на которые вы никогда не будете смотреть» красивым пустым холстом кода.

"eslint.codeAction.disableRuleComment": {
  "enable": true,
  "location": "separateLine"
},

При отключении ESLint для строки это помещает комментарий в отдельную строку. В основном это улучшение читабельности, которое позволяет сократить строки и предупреждает читателей о том, что то, что они собираются прочитать, имеет определенные проблемы.

"eslint.validate": [
  "html",
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],

Включите ESLint для выбранных вами языков. Моя конфигурация адаптирована для веб-разработки. Не стесняйтесь добавлять свои собственные.

"files.associations": {
  "*.cfn": "yaml"
},
"yaml.customTags": [
  "!And",
  "!And sequence",
  "!Base64",
  "!Cidr",
  "!Equals",
  "!Equals sequence",
  "!FindInMap",
  "!FindInMap sequence",
  "!GetAtt",
  "!GetAZs",
  "!If",
  "!If sequence",
  "!ImportValue",
  "!ImportValue sequence",
  "!Join",
  "!Join sequence",
  "!Not",
  "!Not sequence",
  "!Or",
  "!Or sequence",
  "!Ref",
  "!Select",
  "!Select sequence",
  "!Split",
  "!Split sequence",
  "!Sub",
  "!Sub sequence"
],

Это идентифицирует файлы шаблонов AWS CloudFormation как YAML для линтинга и проверки и добавляет поддержку некоторых команд CloudFormation.

"files.exclude": {
  ".git": true,
  ".vscode": true,
  "node_modules": true,
  "package-lock.json": true,
  "yarn.lock": true
},

Файлы, к которым вы не будете получать доступ вручную из файлового проводника: конфигурация git, конфигурация VS Code, ваши модули Node и ваши файлы блокировки (которые всегда должны создаваться автоматически). Уберите шум.

"search.exclude": {
  ".git": true,
  ".vscode": true,
  ".yarn": true,
  "build": true,
  "dist": true,
  "node_modules": true,
  "types": true,
  ".pnp.cjs": true,
  ".pnp.js": true,
  ".pnp.mjs": true,
  "package-lock.json": true,
  "yarn.lock": true
},

Файлы, которые вам не нужны в результатах поиска: конфигурация git, конфигурация VS Code, зависимости Yarn, ваша окончательная сборка, модули Node, конфигурация Plug-n-Play и файлы блокировки. Эти файлы заполнены ненужной информацией, которая часто ссылается на ваш реальный код. Уберите этот шум из результатов поиска.

"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Я слышал, тебе нравится Prettier. Это устанавливает для вашего средства форматирования значение Prettier, что особенно полезно, когда средство форматирования вашего редактора и ваш линтер CI / CD отличаются. Я рекомендую установить то, что ваш CI / CD использует для пуха. В этом случае я также рекомендую вам настроить CI / CD на использование Prettier.

Ла фин 🔚

Если у вас есть собственные рекомендации по настройке, без которых вы просто не можете жить, оставьте их в комментариях ниже.

Чтобы читать больше моих колонок, вы можете подписаться на меня в LinkedIn и Twitter или посмотреть мое портфолио на CharlesStover.com.