Найти тему

Как я пытался научиться кодить #1

Оглавление

Выбор языка.

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

Сначала определился с языком, первый язык к изучению JavaScript.

Почему?

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

Сказано - сделано.

Нашел самоучитель с заданиям по предмету, начал потихоньку делать первыше шаги. Для начала скачал Visual Studio Code.

-2

Устанавливаем программу и открываем ее...

-3

Переходим во вкладку плагины (Extensions) Ctrl+Shift+X

Рекомендуемые плагины:

All Autocomplete - автоматически предлагает варианты команд после ввода даже одной буквы, позволяет не запоминать сложные названия команд и сокращает срок написания кода, за счет автоподстановки.

Auto Close Tag - автоматически закрывает тэг в php или html коде. Плюса два, во первых не забудешь закрыть тэг и страница не будет сломана, во вторых опять же скорость набора кода, потому что эти </> отнимают кучу времени.

Auto Complete Tag - комбинируют Auto Close Tag и Auto Rename Tag

Auto Rename Tag - переименовывает открывающий и закрывающий тэг одновременно при правке любого из них .

Beautify - плагин который форматирует код в красивом читаемом формате.

Code Runner - плагин запуск кода на разных языках программирования, не только JavaScript, но и С, С++ и все самые распространенные. Ruby, etc.

ESLint - JavaScript-линтер, помогает в написание кода, проверяя ошибки, и делая код более красивым + поддерживает распространенные фреймворки для интеграции в код.

-4

GitLens — Git supercharged - Это расширение перезагружает встроенные возможности Visual Studio Code по работе с Git. Оно в наглядном виде предоставляет информацию об авторстве изменений в Git, а также облегчает перемещение по репозиториям и позволяет отслеживать историю изменений файлов или веток, использовать команды сравнения кода и многое другое.

Import Cost - Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.

-5

JavaScript (ES6) code snippets - плагин с программными конструкциями (сниппеты), подходящие для использования в файлах следующих типов:

  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

jshint - Статический анализатор, просматривает код и находит в нем ошибки, прежде чем вы его запустите. Они выполняют простые проверки, например, проверку синтаксиса принудительного исполнения (например, наличия табуляции вместо пробелов) и более глобальные проверки, такие как проверка того, чтобы функции не были слишком сложными. Статические анализаторы также ищут ошибки, которые невозможно найти в процессе тестирования, например, == вместо ===. Интегрирован с Node.js поэтому он более гибкий, и позволяет включает его во время написания кода. *Обратите внимание данный плагин нужно дополнительно установить, для начала скачайте программу Node.js и установите ее и с помощью терминала, в linux и mac, можно установить с помощью встроенного терминала. В Windows можно это сделать с помощью cmd.exe, например в любой папке зажать "Shift" на клавиатуре и нажать правую клавишу мыши и выбрать "Открыть окно команд", в терминале вводите npm install -g jshint

Live Server - позволяет запускать код в браузере на localhost (на локальном компьютере) * требует настройки node.js как БД и установки плагина в браузере.

Multiple clipboards for VSCode - переопределяет стандартные команды «выделить» и «вырезать». Добавляет возможность скопировать несколько блоков текста в единый буфер.

Path Autocomplete - позволяет не писать путь к определенному объекту вручную, а сам предлагает из списка объектов в проекте.

Reactjs code snippets - сниппеты для Reactjs, подходящие для использования в файлах следующих типов:

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)

Sass - упрощение написания css кода.

Theme - Oceanic Next - тема для красоты и удобства работы редактора.

vscode-icons - создает отдельные иконки для разных типов и форматов, упрощая работу.


На данном этапе вам нужно установить все плагины и настроить их, особенно
jshint, Node.js и Live Server.

В следующей статье я расскажу как я боролся с Node.js и Live Server.

Кодеров, прошу не бомбить, мой опыт кодинга ограничивается hello world, поэтому все что здесь написано мое мнение и оно может быть ошибочным.