Стандартный набор рабочих процессов внешнего кода

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты. Для написания кода также необходимо иметь полный набор рабочих процессов (инструментов и процессов).

Скажи это первымВыбор редактора, до того, как я занялся фронтенд-индустрией, моим любимым редактором кода былsublime text, это очень просто, и на большинстве языков можно писать, например писатьpython, вот что я изучаю в 2017 годуpythonопубликовал статью оsublime text изБайду опыт:

Но я почти не использую его больше, его заменил VSCode, редактор с открытым исходным кодом от Microsoft, который поставляется сgit,eslintи другие инструменты, давайте кодировать более качественно и эффективно.

Далееспецификация кодаСторона, всего несколько лет назад, чтобы написать код, мне не волнует качество кода, следуйте принципу «использование на линии», с итерацией проекта, кода, все более раздутый (к счастью, я делаю Не нужны итерации перед проектом), я, казалось, слышал, как кто-то ругался на меня TUCAO код 🤣, как я TUCAO код как другие. Теперь мы можем использоватьeslint,prettier,editorConfigДля стандартизации нашего кода это очень важно для команды.

давай поговоримgit рабочий процесс, теперь почти всегда используется управляющий кодgitИнструменты управления версиями, это надо понимать, как некий базовый push-pull и разрешение конфликтов, мы не будем об этом, в основном поговорим об инструментах и ​​методах использования git в командной работе.

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

ESLint

ESLint — это подключаемый модуль статической проверки кода JavaScript. Его ядром является анализ кода путем сопоставления с образцом AST (абстрактного синтаксического дерева), полученного в результате разбора кода, для проверки качества и стиля кода.

Установить

Установите и инициализируйте eslint:

// 全局安装
npm install -g eslint

// cd到项目根目录下
// 强制初始化package.json
npm init -force

// 初始化ESLint
eslint --init

Как использовать

писать заметки

Комментарий следующей строки указывает, что он отключен в текущем файле.consoleКлючевое слово

/* eslint no-console: "error" */

записать файл

Поддержка ESLinteslint.js,eslintrc.yaml,eslintrc.jsonтип конфигурационного файла.

Например, файл конфигурации eslint.js:

module.exports = {
        env: {
                // 环境
                browser: true,
                es2021: true,
        },
        extends: [
                // 拓展
                'eslint:recommended',
                'plugin:@typescript-eslint/recommended',
        ],
        parser: '@typescript-eslint/parser', // 解析器，本解析器支持Ts
        parserOptions: {
                // 解析器配置选项
                ecmaVersion: 12, // 指定es版本
                sourceType: 'module', // 代码支持es6，使用module
        },
        plugins: [
                // 插件
                '@typescript-eslint',
        ],
        rules: {
                // 规则
        },
};

элемент конфигурации

• парсер - парсер
• parserOptions - параметры парсера
• env and globals — окружение и глобальные переменные
• правила - правила
  • off или 0, чтобы отключить правило
  • предупреждение или 1, открыть правило
  • ошибка или 2, правило включено, и ошибка не позволит запустить код
• плагины - плагины
• расширяет - расширяет

Настроить приоритет

Правило состоит в том, чтобы использовать файл .eslintrc, ближайший к инструментируемому файлу, с наивысшим приоритетом.

1. Встроенная конфигурация
2. параметры командной строки
3. Конфигурация на уровне проекта
4. Конфигурация среды IDE

Prettier

Prettierэто инструмент форматирования кода.

Установите и используйте

npm install --save-dev --save-exact prettier

// 格式化所有文件，npx命令是使用当前项目下的prettier
npx prettier --write .

конфигурационный файл

PrettierПоддерживает .prettierrc в качестве имени, начиная с.yaml .yml .json .jsэто файл конфигурации с суффиксом, конечно, вы также можете использоватьpackage.jsonв файлеPrettierсвойства для настройки.

module.exports = {
        printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
        tabWidth: 2, //一个tab代表几个空格数，默认为80
        useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
        singleQuote: false, //字符串是否使用单引号，默认为false，使用双引号
        semi: true, //行位是否使用分号，默认为true
        trailingComma: 'none', //是否使用尾逗号，有三个可选值"
}

EditorConfig

EditorConfig помогает поддерживать единый стиль кодирования для нескольких разработчиков, работающих над одним и тем же проектом в нескольких редакторах и IDE, что необходимо для команд.

.editorconfig файл

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
root = true

# Unix-style newlines with a newline ending every file 对于所有的文件  始终在文件末尾插入一个新行
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset  对于所有的js,py文件，设置文件字符集为utf-8
[*.{js,py}]
charset = utf-8

# 4 space indentation 控制py文件类型的缩进大小
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified) 设置某中文件的缩进风格为tab Makefile未指明
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory  设置在lib目录下所有JS的缩进为
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml 设置确切文件 package.json/.travis/.yml的缩进类型
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

подстановочный знак

*                匹配除/之外的任意字符串
**               匹配任意字符串
?                匹配任意单个字符
[name]           匹配name中的任意一个单一字符
[!name]          匹配不存在name中的任意一个单一字符
{s1,s2,s3}       匹配给定的字符串中的任意一个(用逗号分隔) 
{num1..num2}   　匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数

Атрибуты

indent_style    设置缩进风格(tab是硬缩进，space为软缩进)
indent_size     用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width
tab_width       用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line     设置换行符，值为lf、cr和crlf
charset         设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom
trim_trailing_whitespace  设为true表示会去除换行行首的任意空白字符。
insert_final_newline      设为true表示使文件以一个空白行结尾
root        　　　表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件

Интеграция с VSCode

я используюVSCode, чтобы добавить ему магии, добавьтеEditorConfig,Eslint,Prettier,Gitрасширение.

НижеPrettierРасширение, я установил его ниже, вы можете найти и установить его самостоятельно в расширении.

Настроить глобальное рабочее пространствоsetting.jsonфайл, добавьте в файл следующую конфигурацию:

// 设置全部语言在保存时自动格式化
"editor.formatOnSave": ture,
// 设置特定语言在保存时自动格式化
"[javascript]": {
    "editor.formatOnSave": true
}

более красивая конфигурация

{
  // 设置全部语言的默认格式化程序为prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 设置特定语言的默认格式化程序为prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Конфигурация ESLint

{
// 保存时自动修复
​"editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
}
}

**

husky/lint-staged

Перед фиксацией в git нам нужноУбедитесь, что наш код соответствует спецификации, если он не соответствует, код не будет разрешен для отправки.

Сначала установите зависимости:

npm install -D husky

// lint-staged 可以让husky只检验git工作区的文件，不会导致你一下出现成百上千个错误
npm install -D lint-staged

затем изменитьpackage.json, добавить конфигурацию:

"scripts": {
	"precommit": "eslint src/**/*.js"
}
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"]
}

существуетgit commitПеред входом в сканирование файла рабочей области выполнитеprettierскрипт, модифицированныйeslintвопросы, а затем важные фиксации в рабочей области.

Commitizen

Инструмент для форматирования сообщений коммитов, зачем вам этот инструмент, это следующееangular.jsСообщение коммита проекта с открытым исходным кодом очень ясное почти все крупные проекты и крупные компании используют этот видcommitТехнические характеристики. выгода:

• Предоставляет больше исторической информации для быстрого просмотра
• может фильтровать некоторыеcommit, для легкой фильтрации кодовreview
• можно отследитьcommitСоздать журнал изменений
• может быть связаноissues

**

Установить

npm install -g commitizen

Установите совместимый с AngularJSпредставить инструкции,инициализацияcz-conventional-changelogадаптер:

commitizen init cz-conventional-changelog --save --save-exact

затем используйтеgit czкоманда вместо этогоgit comitЧтобы отправить инструкции git:

Инструкции по отправке индивидуальных проектов

Приведенные выше инструкции по отправке все на английском языке, если вы хотите настроить, вы можете попробоватьcz-customizable, первая установка:

npm install cz-customizable --save-dev

Измените файл package.json:

"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

Создан в корневом каталоге проекта.cz.config.jsдокумент:

'use strict';

module.exports = {

  types: [
    {value: '特性',     name: '特性:    一个新的特性'},
    {value: '修复',      name: '修复:    修复一个Bug'},
    {value: '文档',     name: '文档:    变更的只有文档'},
    {value: '格式',    name: '格式:    空格, 分号等格式修复'},
    {value: '重构', name: '重构:    代码重构，注意和特性、修复区分开'},
    {value: '性能',     name: '性能:    提升性能'},
    {value: '测试',     name: '测试:    添加一个测试'},
    {value: '工具',    name: '工具:    开发工具变动(构建、脚手架工具等)'},
    {value: '回滚',   name: '回滚:    代码回退'}
  ],

  scopes: [
    {name: '模块1'},
    {name: '模块2'},
    {name: '模块3'},
    {name: '模块4'}
  ],

  // it needs to match the value for field type. Eg.: 'fix'
  /*
  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: '选择一种你的提交类型:',
    scope: '选择一个scope (可选):',
    // used if allowCustomScopes is true
    customScope: 'Denote the SCOPE of this change:',
    subject: '短说明:\n',
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: '非兼容性说明 (可选):\n',
    footer: '关联关闭的issue，例如：#31, #34(可选):\n',
    confirmCommit: '确定提交说明?'
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['特性', '修复'],

  // limit subject length
  subjectLimit: 100

};

а потом беги,git cz:

Проверка Commitizen

Проверить, соответствует ли представленная инструкция спецификации, если нет, ее нельзя отправить

npm install --save-dev @commitlint/cli

// 安装符合Angular风格的校验规则
npm install --save-dev @commitlint/config-conventional 

Создать в корневом каталогеcommitlint.config.jsИ настроить проверку:

module.exports = {
  extends: ['@commitlint/config-conventional']
};

затем вpackage.jsonНастройте хаски в , мы установили его ранее, добавьте конфигурацию напрямую:

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }  
}

Добавьте смайлик, чтобы зафиксировать

Если это так, то более ярко и интересно?Установить:

npm i -g gitmoji-cli

использовать: вы можете найти это в этомgitmojiВеб-сайт находит больше выражений, чтобы обогатить вашу запись о представлении, просто нужно добавить тип в запись о представлении.:bug:Код может отображать выражение.

использованная литература

• Наггетс.Талант/пост/690978…
• cloud.Tencent.com/developer/ ах…
• ву ву ву
• nuggets.capable/post/684490…