В последнее время меня несколько раз спрашивали, какие инструменты я использую для разработки JavaScript, поэтому я решил поделиться своей базовой настройкой в ​​кратком посте в блоге вместе с некоторыми инструкциями по настройке. Как и сам ландшафт JS, инструменты и настройки очень быстро устаревают. Так что, если вы читаете это в 2017 году в своем квантовом мозгу (он похож на ноутбук, но находится в вашем уме), пожалуйста, имейте это в виду.

Атом

Существует множество отличных редакторов кода, из которых вы можете выбирать. В настоящее время я использую Atom для работы с React и Meteor, и мне это нравится. Это бесплатно, с открытым исходным кодом и за ним стоит сильное сообщество.

Созданный командой GitHub и основанный на очевидных заметках из Sublime Text (мой предыдущий любимый редактор), Atom имеет отличную систему управления пакетами, встроенную прямо в редактор. Как и в случае с Atmosphere и npm, тысячи людей создают и поддерживают отличные пакеты для Atom. Скорее всего, если вы чувствуете, что что-то упускаете в своем рабочем процессе, значит, кто-то уже создал пакет, который позаботится об этом.

https://github.com/atom/atom

Эслинт

Линтинг — чрезвычайно полезный процесс анализа вашего кода на наличие потенциальных ошибок.

Настроить линтинг кода для каждого проекта с помощью Atom очень просто. Если вы еще не используете Eslint или аналогичный инструмент при написании кода JavaScript, начните сегодня. Серьезно, начните прямо сейчас. Вы начнете писать более качественный, устойчивый и легко читаемый код практически сразу. И что еще лучше, пакет Eslint в Atom запускается автоматически, пока вы кодируете, и может автоматически позаботиться о распространенных ошибках, таких как пропущенные запятые, автоматически для вас при сохранении (если вы этого хотите).

Eslint полностью настраивается в соответствии с вашим стилем кодирования, и в OK GROW! мы используем слегка измененную версию официальной конфигурации AirBnb eslint, которая быстро стала отраслевым стандартом.

Хотя у вас может быть глобальный файл Eslint на вашем компьютере, который Atom будет использовать для каждого отдельного проекта, в OK GROW! мы выступаем за использование конфигурационного файла для каждого проекта по нескольким причинам:

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

Настройка Eslint в Atom

Установите пакеты Atom

Откройте Atom › Preferences › Install и убедитесь, что установлены следующие пакеты:

Установите npm-модули

Установите специальные модули eslint, airbnb и meteor в сам проект (не глобально):

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint eslint-import-resolver-meteor

Создайте файл проекта .eslintrc

Вы можете создать свой собственный или просто скопировать тот, который мы используем в свой корень:

curl -O https://raw.githubusercontent.com/okgrow/guides/master/code_style/.eslintrc

Плагины атома

Существует множество плагинов Atom, которые упрощают вашу жизнь и ускоряют работу. Я сделаю отдельный пост в блоге, чтобы поделиться некоторыми из фаворитов из OK GROW! команда.

Фрагменты

Есть несколько шаблонов кода, которые вы будете использовать снова и снова. Atom позволяет легко добавлять пользовательские фрагменты для всего, что вы используете повторно. Мне нравится хранить их в виде фрагментов, а не в пакете, чтобы я мог быстро настроить их по мере повышения уровня. Вы можете ознакомиться с несколькими фрагментами реакции ES6, которые я использую в атоме.

Вы можете скопировать и вставить эти фрагменты вAtom › Snippets, если хотите попробовать их.

Ярлыки

Это относится практически к каждой программе, которую вы когда-либо использовали, но изучите сочетания клавиш. Как и в случае с сниппетами, все, что вы делаете постоянно, должно быть оптимизировано. Например, в древовидном представлении Atom вы можете щелкнуть в любом месте структуры папок и использовать клавишу для создания нового файла.

Сообщения коммитов Git

Я использую Atom для написания своих сообщений коммитов, особенно для больших коммитов. Это побуждает меня писать красивые, подробные описания. Чтобы настроить Atom по умолчанию, просто вставьте в терминал следующее:

git config --global core.editor "atom --wait"

Теперь, когда вы вводите git commit, он автоматически открывает Atom, чтобы вы могли ввести сообщение о коммите. Сохраните файл и закройте окно (не только вкладку), и ваша фиксация продолжится.

Зш

Zsh — это альтернатива оболочке Bash по умолчанию, которая поставляется с терминалом в OS X. Она легко настраивается, и именно здесь появляется oh-my-xsh — управляемая сообществом структура для управления вашей конфигурацией zsh.

Это очень просто установить. Просто откройте терминал и вставьте:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Зш и Гит

В Oh-my-zsh по умолчанию установлен плагин git. Наиболее заметным преимуществом этого плагина является возможность сразу увидеть, на какой ветке вы сейчас находитесь.

Только ради этого стоит использовать Zsh!

Zsh Псевдонимы

Zsh, как и Bash, имеет псевдонимы для задач, которые вы повторяете (заметили здесь тему?). Например, есть ли папка, в которую вы часто заходите? Просто откройте файл конфигурации в Atom:

atom ~/.oh-my-zsh/lib/directories.zsh`

И добавьте псевдоним:

alias shortcut='cd /popular/folder/path/'

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

Ярлыки строки чтения

Даже если вы не решите использовать Zsh, вы можете использовать горячие клавиши для чтения. Например, вместо того, чтобы яростно нажимать на клавишу со стрелкой вверх в попытке найти строку, которую вы ищете, попробуйте вместо этого использовать Ctrl + R и выполнить поиск!

Flycut

Этот удивительный маленький инструмент для OS X запоминает историю вашего буфера обмена. Скопируйте несколько элементов подряд, а затем получите доступ ко всем из удобного раскрывающегося списка в строке состояния.

Шифтит

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

Первоначально опубликовано на www.okgrow.com.