Сейчас существует множество интерфейсных инструментов (webpack, rollup, eslint, prettier, husky, lerna, commitlint и т. д.), все они созданы для оптимизации и улучшения интерфейса разработки. Но вот проблема: в этих инструментах очень много конфигурационных полей, которые не могут быть исправлены памятью, поэтому во многих случаях они написаны предшественниками и скопированы последующими поколениями. Но, исходя из принципа не желая становиться копи-инженером, я усердно работал над чтением различных документов, но когда я его написал, то обнаружил, что вообще не могу вспомнить эти поля конфигурации. хороший опыт разработки, есть молоток опыт. . .
Написание конфигурационного файла должно иметь возможность разумно подсказывать поле, и когда я пишу неправильное поле, оно может быть помечено красным, так же, как запись ts
Многие интерфейсные инструменты поддерживают файлы rc,.json,.yaml,.yml,.jsПишите элементы конфигурации в файл, т.к. на самом деле они в основном используютсяcosmiconfigЭта библиотека (или библиотека с аналогичным функционалом).
Если файл конфигурации.tsФайл можно ограничить и разумно запросить, написав файл объявления, но немного глупо говорить, что файл конфигурации должен быть скомпилирован tsc.
К счастью, мы можем реализовать ограничения типов в js с помощью комментариев jsdoc.
Сначала настройте параметры vscode, откройте настройки, установитеjavascript.implicitProjectConfig.checkJsЕсли правда, вы можете искать через визуальную колонкуcheckjs, отметьте соответствующие параметры:
или непосредственно вsettings.jsonНапишите в файле:
"javascript.implicitProjectConfig.checkJs": true
Чтобы ограничить соответствующий тип, используйте jsdoc@typeВы можете, например:
Имя переменной ограничения представляет собой число, а строка назначения отмечена красным как напоминание.
Теперь ключевым моментом является наличие интерфейса, соответствующего элементу конфигурации инструмента, чтобы можно было предоставлять ограничения и интеллектуальные подсказки.
кwebpackНапример,webpackФайл объявления экспортирует файл с именемConfigurationинтерфейс, используйте это, чтобы ограничить и intellisensewebpackКонфигурация:
Аналогично, я также нашелrollupдаRollupOptions:
Согласно этой идее, если эти инструменты имеют соответствующие файлы объявлений и типы элементов конфигурации определены в файлах объявлений, и этот инструмент может поддерживать.jsконфигурации файла, то вы можете следовать приведенным выше идеям, чтобы ограничить и подсказать.
К сожалению, некоторые инструменты не поддерживают.jsконфигурация файла, напримерlerna, есть также много инструментов, у которых нет соответствующих файлов объявлений, таких какlerna,husky,commitlint.
Конечно, идея самостоятельного написания файла объявлений возможна, но lerna поддерживает только.jsonКак решить конфигурацию файла?
Очевидно, что для этого требуется валидатор данных json, Самое замечательное то, что гиганты в сообществе открытого исходного кода на самом деле написали большинство валидаторов для таких новичков, как я.
Проект, инициированный гигантами, называетсяschemastore, сайт естьschemastore.org/json/, открывая веб-сайт, он полон различных схем json:
Следующая проблема заключается в том, чтобы установить ограничения и Intellisense для определенных файлов json, установив vscode.
прямо в vscodesettings.jsonфайл написан, например ограничение lerna's:
"json.schemas": [{
"fileMatch": [
"lerna.json"
],
"url": "http://json.schemastore.org/lerna.json"
}
]
Потрясающе, это приемлемый опыт разработки.
Я выбрал общеупотребительныйbabel,lerna,husky,eslint,prettier,travisд., конфигурация следующая:
{
"json.schemas": [{
"fileMatch": [
"/.babelrc"
],
"url": "http://json.schemastore.org/babelrc"
}, {
"fileMatch": [
"lerna.json"
],
"url": "http://json.schemastore.org/lerna.json"
}, {
"fileMatch": [
"/.huskyrc"
],
"url": "http://json.schemastore.org/huskyrc"
}, {
"fileMatch": [
"/.csslintrc"
],
"url": "http://json.schemastore.org/csslintrc"
}, {
"fileMatch": [
".eslintrc"
],
"url": "http://json.schemastore.org/eslintrc"
}, {
"fileMatch": [
".htmlhintrc"
],
"url": "http://json.schemastore.org/htmlhint"
}, {
"fileMatch": [
"jsconfig.json"
],
"url": "http://json.schemastore.org/jsconfig"
}, {
"fileMatch": [
".prettierrc"
],
"url": "http://json.schemastore.org/prettierrc"
}, {
"fileMatch": [
".travis.yml"
],
"url": "http://json.schemastore.org/travis"
}, {
"fileMatch": [
".lintstagedrc"
],
"url": "http://json.schemastore.org/lintstagedrc.schema"
}]
}
Конечно, вышеперечисленные ситуации не могут удовлетворить все ситуации.Есть много маленьких, но отличных колесиков и инструментов, но вышеизложенное - это только идея и осознание.При столкновении с подобными ситуациями вы можете сами написать файл объявления и jsonschema для ее решения.
В итоге это был как обычно рекламный пост.Недавно был открыт новый публичный аккаунт для обмена технологиями.Все желающие могут подписаться👇 (сейчас количество подписчиков невелико 🤕)