С тех пор, как Microsoft выпустила Visual Studio Code (также известный как VSCode) в 2015 году, он стал самым популярным редактором кода среди многих разработчиков. У него очень активное сообщество и участники на Github. Открытый исходный код, поддержка переносимости и кросс-платформенности - это некоторые большие преимущества для VSCode.
Если вы только начинаете заниматься веб-разработкой, VSCode - отличный инструмент для работы. Он имеет много гибкости и возможностей настройки, чтобы соответствовать вашей среде разработчика.
Для начала нам потребуются некоторые расширения из Marketplace Microsoft, которые доступны бесплатно.
1. Красивее
Вы когда-нибудь сталкивались с запутанной ситуацией с отступами HTML? Prettier приходит на помощь. Это простой, но мощный инструмент для создания отступов в вашем запутанном HTML, CSS и JS. Не только это, он также помогает форматировать TypeScript, Flow, JSX, JSON, SCSS, Less, Vue, Angular, GraphQL, Markdown и YAML, если вы ими пользуетесь.
2. Поддержка HTML CSS
Это в основном помогает, предлагая теги, которые используются в открытых в данный момент файлах HTML и CSS. Это действительно полезно, когда вы работаете с очень большим проектом с большим количеством тегов и классов.
3. Живой сервер
Это очень мощный инструмент для веб-разработчиков, особенно для разработчиков внешнего интерфейса. Все, что он делает, это создает локальный сервер на определенном порту, открывает веб-сайт, над которым вы сейчас работаете, в браузере по умолчанию и обновляет его, как только вы вносите какие-либо изменения в свой код. Это вычитает ваши усилия, чтобы постоянно нажимать эту кнопку обновления, чтобы увидеть изменения, отраженные в браузере. У него есть удобный ярлык в строке состояния VSCode для запуска сервера.
4. Предварительный просмотр в браузере
Это расширение выполняет очень ту же задачу, что и вышеупомянутый Live Server, но позволяет сделать еще один шаг, создав интегрированный браузер. Что может быть удобнее этого? Нет. Если вам интересно, как он это делает, то под капотом он использует Headless Chrome, поэтому он безопасен.
5. Отладчик для Chrome
Отладка в два раза сложнее, чем написание кода.
- Брайан Керниган
Как веб-разработчик вы будете много работать с Javascript, и в вашем коде могут быть ошибки. Вот где выполняется отладка, и это расширение может быть для этого полезно. Весь Javascript, который вы пишете, можно отладить или, проще говоря, скомпилировать с помощью любого браузера, потому что у них есть встроенные JS-компиляторы (также известные как Javascript Engine). В случае Chrome это движок V8, который интерпретирует код Javascript.
6. Фрагменты кода ES6
Это расширение имеет предопределенные фрагменты кода для часто используемого кода Javascript и Typescript. Это экономия времени в том смысле, что вам не нужно писать весь синтаксис, он завершается за вас.
7. Раскраска пара скобок
Это простое расширение, которое выделяет скобки текущих блоков, чтобы избежать путаницы при работе с большим количеством вложенных блоков.
8. Quokka.js
Это называется живым блокнотом для Javascript. Лучшая часть этого - живая оценка вашего кода. Это помогает в отладке кода по мере его написания.
Есть другие расширения для повышения производительности и рабочего процесса. Эта статья будет обновляться каждый месяц с дополнительными расширениями.
В качестве бонуса ниже приведены некоторые источники для изучения веб-разработки.
