Когда я начал Grit, я был взволнован, узнав, что команда Electron поставляет типы с Electron, которые раскрывают API Electron в ваших инструментах. Поскольку я являюсь поклонником TypeScript, я настроил свою среду разработки так, чтобы мой код также писался на TypeScript.

После нескольких дней написания кода TS для его транспиляции для моего приложения меня начал раздражать тот факт, что я транспилирую код. И вот причина:

В Electron вы пишете код для очень мощного браузера. ES2015 полностью реализован за исключением модулей ES. Это означает, что код, который я могу написать для браузера напрямую, для меня уже настолько близок к идеалу, что мне кажется неправильным транспилировать его из чего-то другого. Поэтому я преобразовал свой проект обратно в JavaScript.

После многих лет работы с Babel и TypeScript написание кода ES2015+ непосредственно для браузера кажется очень свободным.

Нет исходных карт для декодирования, нет типов для управления.

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

К счастью, есть VSCode!

VSCode представил нечто, что называется jsconfig.json. Это файл конфигурации, который сообщает VSCode, что папка, содержащая его, является проектом JavaScript.

Из code.visualstudio.com:

jsconfig.json является потомком tsconfig.json, файла конфигурации для TypeScript. jsconfig.json – это tsconfig.json, для атрибута "allowJs" которого задано значение true.

Добавление этого файла указывает VSCode включить Языковую службу JavaScript, основанную на языковой службе TypeScript. Это дает вам мощные функции Intellisense на протяжении всего проекта.

Это означает, что вы получаете автодополнение и вводите ошибки для обычного проекта JavaScript. Типы определяются файлами определения типов TypeScript, а также комментариями JSDoc.

Настройка jsconfig.json для Electron

Чтобы заставить его работать удовлетворительно для моей установки Electron, мне пришлось настроить несколько вещей. jsconfig.json — это просто tsconfig.json, поэтому параметры одинаковы.

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

"exclude": ["node_modules"]

В свойстве compileroptions я установил для свойства checkJs значение true, чтобы код JavaScript максимально проверялся на тип.

Поскольку я (должен) использовать модули CommonJS в Electron, мне пришлось установить для свойства module значение commonjs, чтобы файлы index.js разрешались в стиле CommonJS.

И последнее, но не менее важное: чтобы иметь возможность писать код ES2015+ без предупреждений, я установил для свойства target значение es2017.

Вы можете посмотреть мой файл конфигурации прямо здесь.

Добавление определения типа для HyperHTMLElement

Мне пришлось создать файл определений типов для HyperHTMLElement, потому что языковой службе JavaScript не понравилось, что я должен использовать свойство default в требуемом модуле. Это код, о котором идет речь:

const HyperHTMLElement = require('hyperhtml-element').default;

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

Эта настройка позволяет мне писать современный код JavaScript непосредственно для браузера, а также использовать многие функции TypeScript. Любить это.

Если у вас есть какие-либо замечания или комментарии, я буду рад услышать от вас в Твиттере.

Чтобы получать уведомления о новых сообщениях, подпишитесь на ленту или следите за мной в Twitter.

Первоначально опубликовано на www.kahlillechelt.com 25 января 2018 г.