20 плагинов для фронтенд разработчика

В этой статье, я хочу отразить просто минимальный набор который должен установить любой уважающий себя фронтенд разработчик для быстрой и комфортной разработки. На сегодняшний день большинство использует VS Code в качестве основного редактора, поэтому все расширения будут рассматриваться для него.

  • Emmet
  • All Autocomplete
  • Auto Close Tag
  • Auto Complete Tag
  • Auto Rename Tag
  • Beautify
  • Code Runner
  • GitLens — Git supercharged
  • Import Cost
  • JavaScript (ES6) code snippets
  • jshint
  • Live Server
  • Multiple clipboards for VSCode
  • Path Autocomplete
  • Reactjs code snippets
  • Sass
  • Live Sass Compiler
  • Theme — Oceanic Next
  • vscode-icons
  • ESLint

Emmet

Плагин стал просто стандартом веб разработки, с его помощью при определенном опыте можно раскрывать очень крупные конструкции. Допустим вам нужено 3 блока с классом item, внутри которых вы хотите описать картинку, заголовок и описание. Можно заниматься копирование и вставкой, но здесь достаточно написать такую конструкцию:

.item*3>img.item__card+h2.item__title+p.item__description

а раскроется она вот в такую:

<div class="item">
  <img src="" alt="" class="item__card">
  <h2 class="item__title"></h2>
  <p class="item__description"></p>
</div>
<div class="item">
  <img src="" alt="" class="item__card">
  <h2 class="item__title"></h2>
  <p class="item__description"></p>
</div>
<div class="item">
  <img src="" alt="" class="item__card">
  <h2 class="item__title"></h2>
  <p class="item__description"></p>
</div>

Здорово? А уже про создание базового шаблона нечего говорить, просто ставим символ ! и раскрываем в стандартную страницу:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
</body>
</html>

Обрадую, если установили VS Code он идет по умолчанию со средой.

All Autocomplete

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

Auto Close Tag, Auto Complete Tag, Auto Rename Tag

Очень удобные дополнения, позволяют автоматизировать простые рутинные задачи. Первый автоматом добавляет закрывающий тег для форматов HTML/XML. Второй дополняет тот тег что пишите, последний плагин автоматически переименовывает закрывающий тег.

Beautify

Форматтер кода для JavaScript, JSON, CSS, Sass и HTML. При сохранении правильно оформляет структуру кода.

Code Runner

Выполняет содержимое файлов или отдельных строк кода для очень большого количества языков.

GitLens — Git supercharged

В редактор уже встроен Git, однако GitLens существенно расширит его функционал. Можно в пару кликов получить информацию об авторе, навигацию по репозиториям и много чего другого. Более подробнее о возможностях можно найти в описании на странице расширения.

Import Cost

Тоже незаменимое решение, когда мы пользуемся webpack, мы сразу видим размер импортированного пакета сразу в редакторе. Допустим при стандартном импорте:

import Func from 'utils';

Так и при любом другом способе, в том числе и подмодулей и через require. Работает как с JavaScript так и TypeScript.

JavaScript (ES6) code snippets

Более двух лет пользуюсь этой прекрасной штукой, содержит готовые конструкции кода JavaScript TypeScript, так же React и Vue. Описанию возможностей можно уделить целую статью, а времени и сил экономит прилично, о чем так же говорит статистика скачивания.

jshint

Линтер для JavaScript. Для установки нужно сначала установить соответствующий Node пакет. Сделать это можно командой:

npm install -g jshint

Live Server

Делает работу весьма продуктивной, более актуально когда разработчик использует либо большой монитор либо сразу два. Открываем окно с кодом с одной стороны, с другой стороны браузера. Live Server запускает локальный сервер для вашего проекта и можно следить за изменениями в режиме реального времени. Допустим внесли правку, сохранили, а в браузере страница обновляется, профит!

Multiple clipboards for VSCode

Расширяет функционал стандартного буфера обмена, теперь можно скопировать несколько блоков кода в один буфер.

Path Autocomplete

Автодополнение директорий. Удобно когда прописываем путь к скрипту, изображению или чему угодно, расширение автоматом дополняет название директории или файла.

Reactjs code snippets

Готовые конструкции для Reactjs. Допустим чтобы создать стандартную структуру Reactjs введем rcc и раскроем сразу:

import React, { Component } from 'react';

class componentName extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default componentName;

Sass

Подсветка и форматирование кода препроцессора Sass. Тоже одно из самых полезных расширений, только не хватает встроенного компилятора, рекомендую использовать в паре со следующим.

Live Sass Compiler

Появление этого расширения сняло много проблем. Раньше для компиляции использовал Scout (отдельное приложение, следящее за директорией проекта), потом перешел на это чудесное расширение. Как альтернативу можно рассмотреть автоматизацию в gulp, но сейчас не об этом. После установки нужно настроить плагин, допустим я использую такие настройки:

"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 2 versions"
],
"liveSassCompile.settings.formats": [
  {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "~/../css/"
  }
]

Theme — Oceanic Next

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

vscode-icons

Без использования иконок сложно ориентироваться в структуре проекта, а благодаря этому расширению все наглядно и удобно.

ESLint

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

Последние публикации

0 комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *