Настроить реакцию + машинописный текст с нуля (один): dotfiles

React.js
Настроить реакцию + машинописный текст с нуля (один): dotfiles

Я написал статью раньшеСоздайте среду разработки react + typescript + ant design, кажется, что многие материалы уже устарели. Но я увидела, что некоторым читателям недавно понравилась моя статья, если я ее не обновлю, то всегда чувствую, что натравила на них, и мне немного жаль. Однако, если бы я сейчас настраивал ту среду, я бы точно не настраивал ее так, как в той статье, ведь за столь долгий промежуток времени было разработано много инструментов, и мое мышление тоже изменилось, поэтому я просто просто совершенно новая статья, это одна из моих мотивов для написания этой статьи.

В последнее время я написал много типов проектов, в том числеchrome 扩展,VSCode 扩展,electronИ т.д., среда разработки конфигурации написана голой, и не используются какие-то cli-инструменты или сторонние шаблоны проектов. Поэтому я перешагнул много ям и обобщил большой опыт. Так что еще одна творческая мотивация — подвести итоги и поделиться своими лучшими практиками настройки сред разработки.

Машина разработки и редактор, которые я использую,win10pro-1909а такжеVSCode, все используемые зависимости актуальны, и статья будет время от времени обновляться для обеспечения своевременности.

Статья будет разделена на четыре части в соответствии с хронологическим порядком разработки шаблонного проекта:

  1. dotfiles
  2. линтеры и форматтеры
  3. webpack
  4. Интеграция и оптимизация сторонних библиотек

адрес проекта:react-typescript-boilerplate

init

Первый шаг в создании проекта — создать новую папку проекта и инициализировать ее как репозиторий git:

# 新建项目文件夹
mkdir react-typescript-boilerplate
# 切换工作路径到项目文件夹
cd $_
# 初始化 git 仓库
git init

ты можешь поставитьreact-typescript-boilerplateЗамените на любое имя проекта, которое вам нужно,$_Представляет последний параметр предыдущей команды, здесь он представляет папку проекта.

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

.gitignore

Рекомендуется, чтобы первым шагом после инициализации репозитория git было добавление.gitignore. Если вы не добавите его, контроль версий VSCode будет отслеживать все файлы в вашем проекте, включаяnode_modulesКуча файлов, вызывающих такие проблемы, как высокая загрузка процессора и памяти, поэтому лучше настроить его с самого начала.gitignore. настроитьgitignoreРекомендуется использовать VSCodegitignoreрасширение. Его легко использовать:ctrl+shift+pВызов командной панели, вызовAdd gitignoreкоманду, а затем выберитеignoreКонфигурацию можно добавлять несколько раз.

gitignore.gif

Типы элементов, которые я обычно добавляю, включают:Node, VisualStudioCode, JetBrains, Windows, Linux, macOS, вы можете добавить другие типы элементов в соответствии с вашими потребностями, такими какSublimeText,Vim. Хотя я используюVSCodeЗаймитесь разработкой, но с учетом того, что другие могут использовать это при разработке этого проектаWebStorm, поэтому я добавил иJetBrainsсвязанные с IDEignoreконфигурация. Принцип этого расширения заключается в том, чтобы вытягивать проекты с открытым исходным кодом, вытягиваяgitignoreизgitignoreнастроить,Следует отметить, что мы хотим удалить два элемента конфигурации.typings/а такжеIcon. Эти два элемента конфигурации, очевидно, необходимо добавить в систему управления версиями git,typingsПапка, которую мы будем использовать для сохранения файлов определения типа для ts,iconПапки обычно используются для хранения иконок.

.editorconfig

по конфигурацииeditorconfig, мы можем позволить нескольким разработчикам использовать разные редакторы, стиль форматирования кода остается неизменным. Некоторые IDE, такие как IDEA, встроены напрямуюeditorconfigСпецификация, некоторые редакторы, такие как VSCode, должны быть установленысоответствующий плагинподдерживать.

Для теста возьмем VSCode и IDEA, на картинке ниже тестовый файл слева.index.js, право естьeditorcofigконфигурация, примечаниеЯ намеренно поставил отступ в 3 пробела.VSCodeМожно установить его для использования при форматировании кодаformatter, если вы не установите его, используйте встроенныйformatter, то есть:

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
 }

editorconfig-vscode.png

на меняalt + shift + fПосле форматирования видно, что VSCode следуетeditorconfigКонфиг форматирует отступ кода в 3 пробела.

После того, как я пойду вперед и открою проект в идее черезctrl + alt + lФорматирование, как и положено, тоже отформатировано на три пробела, поэтому сопоставлять не буду, как и выше. так,editorconfigЭто позволяет нам поддерживать один и тот же стиль форматирования при использовании разных редакторов.

Можно подумать,prettierЭто еще и инструмент форматирования, зачем в одном проекте настроено два инструмента форматирования (позже настроим)prettier)? Фактически, вы можете увидеть некоторые известные проекты с открытым исходным кодом, такие какreact, VSCodeПросто используйте оба. Собственно подумайте об этом: в конце концов, функция форматирования кода должна быть переданаprettierСделать это, вообще используютlint-staged, каждый раз форматируется только модифицированный код. Значит ли это,editorconfigЭто бесполезная конфигурация?

конечно полезно, по существуeditorconfigа такжеprettierРазница в следующем:editorconfigэто активное действие для редактора, вы добавили.editoronfigфайл, вызвать форматирование VSCode, и результат форматирования.editorconfigНастроенный стиль. а такжеprettierЭто просто инструмент командной строки, который форматирует код, когда нам нужно его вызвать, что само по себе является пассивным. Если вы не настроитеeditorconfig, что когда пользователь изменяет файл, вызываетсяVSCodeГорячие клавиши вручную форматируют код, и он будетprettierотформатируйте его снова, потому чтоVScodeВстроенныйformatterа такжеprettierСтиль отличается, что заставило меня отформатировать его вручную, и он был изменен после отправки. настроитьeditorconfig, и сделать это иprettierЕсли стиль согласован, проблема разных результатов форматирования, упомянутая выше, может быть решена. Фактически,reactВот что он делает.

Фактически, когда пользователь настраиваетprettierкак VSCodejavascriptформатер,editorconfigКонфигурация бесполезна.

edittorconfig-prettier.png

Сказав так много, это на самом деле очень просто настроить.Рекомендуется установить расширение VSCodeEditorConfig for VS Code, после установки можно передать командуGenerate .editorcofigСгенерируйте конфигурацию по умолчанию, я предлагаю добавить строку в концеend_of_line = unset, пусть символ новой строки в конце строки напрямую подчиняется новой строке операционной системы.

root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
# 加上这一行
end_of_line = unset

.nvmrc

nvm(диспетчер версий узла) — это инструмент управления версиями для узла, используйте nvm в Windows для установки другого инструментаnvm-windows.

.nvmrcдаnvmФайл конфигурации, многие инструменты будут читать эту конфигурацию при оценке версии узла проекта, например, travis CI. Если корневой путь проекта имеет.nvmrcтогда вам не нужно.travis.ymlВерсия узла указана в . Для нормальной разработки рекомендуется использовать последнюю версию LTS.Новая версия не только поддерживает больше функций ES, но и в целом повышает производительность и в целом содержит меньше ошибок. Не рекомендуется выбирать последнюю не-LTS-версию при разработке проектов, некоторые пакеты, такие какbcryptСовсем не поддерживается в последней версии, отличной от LTS. Мой друг столкнулся с установкой доbcryptПроблема в том, что невозможно установить, я наконец узнал, что это потому, чтоbcryptТолько что протестировано на LTS-версиях узла, нет гарантии поддержки не-LTS-версий.

Генерируется следующей командой оболочки.nvmrc:

node --version > ./.nvmrc

.npmrc

Как мы все знаем, из-за форс-мажора, будь то внутренний визитgithubили скачатьnpmПакеты имеют скорость улитки. Для домашних пользователей первое, что мы должны сделать, этоnpmИсходный набор исходников Taobao. настроитьnpmисточник предложил использоватьnrm:

# 全局安装 nrm，
yarn global add nrm
# 或者使用 npm 安装，install 可以简写成 i
npm i -g nrm
# 设置使用淘宝源
nrm use taobao

пройти черезnrm lsМы также можем увидеть некоторые другие источники:

$ nrm ls

  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

Проверьте скорость потери пакетов из нескольких распространенных источников, источник Taobao является лучшим:

taobao-cnpm-registry.png

.npmrcэто датьnpmИспользуемый файл конфигурации, конечно, если вы используетеyarn,yarnтакже будет следовать.npmrcконфигурация, однакоyarnЕсть специальный конфигурационный файл.yarnrc.

мы знаем некоторыхnpmКогда пакет установлен, ему необходимо загрузить некоторые бинарные файлы зависимостей, среди которых есть несколько ям, таких какnode-sass,electron,bcryptТакже необходимо настроить прокси для загрузки. Чтобы обеспечить их беспроблемную установку, когда другие сотрудничают в разработке проекта, мы можем установить их в.npmrcЗадайте их зеркальные адреса прямо вnode-sassАдрес зеркала:

# .npmrc
SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass

мы можемЗеркало Taobao npmОзнакомьтесь с более часто используемыми зеркальными адресами.

LICENSE

open source license

В зависимости от характера вашего проекта перейдите на веб-сайтchoose a licenseВыберите подходящую лицензию, скопируйте и вставьте ее в корневой путь проекта.LICENSEилиLICENSE.txtВ файле вы можете изменить некоторые настройки. Здесь я выбираю свободное соглашение MIT и изменяю год и имя автора:

MIT License

Copyright (c) [2020] [YuTengjing]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

package.json

генерироватьpackage.jsonЕсть проблема, которую следует учитывать, когда вы собираетесь использоватьyarn,npm,ещеcnpm?

Вроде недавно опубликовалиyarn2, но я точно не рассматриваю это прямо сейчасyarn2Да, не говоря уже о том, что их много.bug, недостаточно зрелый, принятие сообществом все еще проблема,yarn2а такжеyarn1сильно различаются.

Честно говоря, я думаюnpmОн действительно разработан, я не знаю, почему запуск оформлен как установочный пакет, который не будет добавлен по умолчанию.dependencies, С помощью кэша так легко придумать дизайн илиyarnПервая, заблокированная версия тоже копируетсяyarnиз.

yarnЭто более удобно в использовании. ноyarnсуществуетwindowsчасто естьhashЗначение не совпадает, и тогда его невозможно установить.bug, меня очень разозлило, посмотрел репозиторий github, почти 2000 вопросов.

Я недавно попробовал это сноваcnpm, я был удивлен, что скорость загрузки действительно высокая, то же самое использование источника Taobao,cnpmСравниватьyarnНамного быстрее. но я думаюcnpmПосле установкиnode_modulesЭто выглядит беспорядочно, с большим количеством беспорядочных зависимостей.

Потому что я немного чистюля, так чтоyarnа такжеcnpmя стоюyarn. фактическиyarnИ убийственная функцияyarn workspace, для управленияmonoreposзависимости, хотя этот проект неmonoreposструктуру, но иллюстрирует проблемуnpmОтставание в инженерииyarnОчень далеко.

package.json используется для управленияnpmФайл конфигурации пакета, самый простой способ сгенерировать package.json - это сказатьyarn init -y, файл package.json по умолчанию создается напрямую.

{
  "name": "react-typescript-boilerplate",
  "version": "1.0.0",
  "main": "index.js",
  "author": "YuTengjing <ytj2713151713@gmail.com>",
  "license": "MIT"
}

Давайте изменим эту конфигурацию по умолчанию:

Потому что наш проект не будет опубликован вnpm,такprivateУстановить какtrue.

этоmainЗапись не имеет смысла для нашего проекта шаблона, поэтому она удаляется напрямую.

немного отремонтироватьauthorа такжеrepositoryФормат следующий:

{
  "name": "react-typescript-boilerplate",
  "version": "1.0.0",
  "description": "A boilerplate for react + typescript development",
  "private": true,
  "author": {
    "name": "YuTengjing",
    "url": "https://github.com/tjx666",
    "email": "ytj2713151713@gmail.com"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:tjx666/react-typescript-boilerplate.git"
  },
  "license": "MIT",
  "scripts": {}
}

settings.json

Если вы используете VSCode, вы можете добавить файл конфигурации проекта VSCode..vscode/settings.json. новый.vscodeпапку и создать в нейsettings.jsonдокумент. несмотря на то чтоsettings.jsonсуффикс.json, но по фактуjsoncфайл формата,jsoncа такжеjsonРазница между файлами в том, чтоjsoncразрешить добавлять комментарии,jsoncэтоcто естьcommentЧто означает (примечание). Временно добавьте следующее:

{
    // stylelint 扩展自身的校验就够了
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    // 使用本地安装的 TypeScript 替代 VSCode 内置的来提供智能提示
    "typescript.tsdk": "./node_modules/typescript/lib",
    // 指定哪些文件不参与搜索
    "search.exclude": {
        "**/node_modules": true,
        "dist": true,
        "yarn.lock": true
    },
    // 指定哪些文件不被 VSCode 监听，预防启动 VSCode 时扫描的文件太多，导致 CPU 占用过高
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true,
        "**/dist/**": true
    },
    // 配置 VScode 使用 prettier 的 formatter
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[yaml]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Мы также можем пройти.vscode/extensions.jsonФайл рекомендует пользователю некоторые расширения. Когда пользователь открывает проект, если есть рекомендуемое расширение, которое не установлено, VSCode предложит пользователю установить его. Вы также можете проверить условие фильтра на рынке расширений, чтобы отображались только Рекомендуемые расширения. Просмотр:

// https://gist.github.com/tjx666/daa6317cf80ab5f467c50b2693527875
{
    "recommendations": [
        "editorconfig.editorconfig",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "stylelint.vscode-stylelint",
        "dsznajder.es7-react-js-snippets",
        "mrmlnc.vscode-scss",
        "yutengjing.view-github-repository",
        "yutengjing.open-in-external-app"
    ]
}

recommend extension

.travis.yml

Я решил использовать самый популярный инструмент CI с открытым исходным кодом, travis CI. После создания нового хранилища на github я могу перейти на официальный сайт travis CI, сначала синхронизировать информацию об учетной записи github, а затем выполнить поиск для активации вновь созданного хранилища. Я могу подумать о замене его на github в будущем.actions, по-прежнему используется первымtravis.

travis-ci.png

Создайте новый проект в корневом каталоге проекта.travis.ymlфайл, добавьте следующее:

language: node_js
cache:
  - yarn
install:
  - yarn
script:
  - yarn test

Очень простая конфигурация, отвечающая как раз за автоматическое тестирование. Поскольку в настоящее время тестов нет, мы добавляемechoЗаявления в скрипты npm:

// package.json
"scripts": {
    "test": "echo 'skip test...'"
}

README.md

Readme.md — это инструкция проекта, а readme.md в каждой папке рендерится на странице на Github. Наш readme.md, добавленный в корень корневого каталога проекта, естественно будет отображаться на домашней странице хранилища.

Мы добавляем некоторые полезные значки, такие как статус сборки travis CI, устарела ли версия зависимостей и т. д. Значок по сути представляет собой ссылку, но текстовая часть заменена изображением в формате svg, которое мы можем использовать на веб-сайте.shields.ioВы можете найти все виды значков на веб-сайте.Когда вы посещаете проект github, вы можете обратить внимание на значки, которые вам нравятся, когда вы их видите.

badge-format.png

Добавьте следующее:

<div align="center">

# react-typescript-boilerplate

[![Build Status](https://travis-ci.org/tjx666/react-typescript-boilerplate.svg?branch=master)](https://travis-ci.org/tjx666/react-typescript-boilerplate) [![dependencies Status](https://david-dm.org/tjx666/react-typescript-boilerplate/status.svg)](https://david-dm.org/tjx666/react-typescript-boilerplate) [![devDependencies Status](https://david-dm.org/tjx666/react-typescript-boilerplate/dev-status.svg)](https://david-dm.org/tjx666/react-typescript-boilerplate?type=dev) [![Known Vulnerabilities](https://snyk.io/test/github/tjx666/react-typescript-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/tjx666/react-typescript-boilerplate?targetFile=package.json) [![Percentage of issues still open](https://isitmaintained.com/badge/open/tjx666/react-typescript-boilerplate.svg)](http://isitmaintained.com/project/tjx666/react-typescript-boilerplate')

A boilerplate for react + typescript development

</div>

Используйте свойство align элемента div для выравнивания заголовка, значка и описания по центру.

first commit

На этом этапе вы можете сделать первую отправку:

# 添加远程仓库地址
git remote add github git@github.com:tjx666/react-typescript-boilerplate.git
# 添加所有修改到暂存区
git add -A
# 提交，使用 :tada: emoji
git commit -m ":tada: first commit, add some dotfiles"
# 推送到 github，关联 github 远程仓库和 master 分支，下次还是 master 分支就可以直接 git push 了
git push github -u master

Рекомендуемое использованиеgitmoji-cliИли используйте расширение VSCode напрямуюGitmoji CommitСгенерируйте смайлики git.

СледующийНастройка линтеров и форматтеров продолжится.

Для более подробной информации рекомендуется смотреть непосредственно исходный код, адрес проекта:react-typescript-boilerplate. Если вы считаете, что эта статья была вам полезна, поставьте ей звездочку 😁. Если у вас есть какие-либо вопросы по содержанию этой статьи или есть какие-либо улучшения, сообщите об этом через вопросы github и область комментариев платформы публикации.

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

Категории