Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Используйте эти спецификации конфигурации и отформатируйте свой код

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

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

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

EditorConfig

Во-первых, нам нужна базовая спецификация, такая как отступы, способ переноса строк и т. д. Он должен работать во всех командах, на всех языках, во всех редакторах.

editorconfigможет помочь нам достичь этого. Это позволяет всем разработчикам придерживаться основных правил кодирования.

Что нам нужно сделать, так это:

1. УстановитьEditorConfigПлагины (некоторые редакторы поддерживают по умолчаниюEditorConfig, пожалуйста, посмотриЭти редакторы не требуют установки плагинов.).
2. настроить.editorconfigдокумент.

Ниже приведены.editorconfigИспользование и примеры:

## 打开文件时，EditorConfig 插件会在打开的文件的目录和每个父目录中查找名为 .editorconfig 的文件。 
## 如果到达根文件路径或找到具有 root=true 的 EditorConfig 文件，将停止对 .editorconfig 文件的搜索。
## 如果 root=true 没有配置, EditorConfig 插件将会在工程之外寻找 .editorconfig 文件
root = true

## 使用规则匹配文件
## *            匹配任何字符串，路径分隔符 (/) 除外
## **           匹配任意字符串
## ?            匹配任何单个字符
## [name]       匹配给定的字符串中的任何单个字符
## [!name]      匹配不在给定字符串中的任何单个字符
## {s1,s2,s3}   匹配任意给定的字符串
## {num1..num2} 匹配num1和num2之间的任何整数，其中num1和num2可以是正数或负数
## 如规则[*.{js}]只对 .js 文件生效。一般来说，我们配置 [*] 对所有文件生效。
[*]

## 缩进方式。 值可以是 tab 或者 space
indent_style = space

## 缩进大小。当设置为 tab 时，会取 tab_width 的值。
indent_size = 2

## 通常不需要设置。当 indent_size = tab 时，才会生效。
tab_width = 2;

## 设置为 lf、cr 或 crlf 以控制如何表示换行符。
end_of_line = lf

## 设置为 latin1、utf-8、utf-8-bom、utf-16be 或 utf-16le 来控制字符集。
charset = utf-8

## 设置为 true 以删除换行符之前的任何空格字符，设置为 false 以确保不会。
trim_trailing_whitespace = true

## 设置为 true 以确保文件在保存时以换行符结束，设置为 false 以确保不以换行符结束。
inset_final_newline = true

Eslint

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

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

Как это сделать?

Eslint предоставляет правила руководства по стилю и дает понять, какие из них можно исправить:Stylistic Issues

Что нам нужно сделать, так это:

1. Локальная установка Eslint и спецификации, рекомендованные сообществомeslint-config-airbnb(Это также может быть другая спецификация). Плагин будет использовать установленную библиотеку Eslint (если вы еще этого не сделали:npm i eslint eslint-config-airbnb).
2. Установка VSCodeEslint插件.
3. Добавить к.eslintrc.jsконфигурационный файл.
4. Изменить VSCodesetting.jsonконфигурация файла.

Среди них, если вы хотите автоматически форматировать в соответствии с правилами проекта, четвертый шаг необходим.

setting.json

если вы установилиEslint插件,согласно сcmd + shif + p,ОткрытьdefaultSettings.jsonфайл, нажмитеcmd + fпоискeslintВы можете увидеть все конфигурации ESlint по умолчанию в VSCode. Нам нужно внести в него некоторые изменения.

или нажмитеcmd + shift + pОткрытьsettings.jsonдокумент. Этот документ является пользовательской конфигурацией, конфигурация которой будет покрытаdefaultSettings.jsonодноименная конфигурация. В этом файле у нас естьESLint插件Внесите некоторые изменения в конфигурацию, чтобы добиться желаемого эффекта.

Во-первых, мы хотим保存时自动格式化, есть три конфигурации для достижения этого эффекта:

• editor.formatOnSave + eslint.format.enable. Прежняя конфигурация:保存时格式化, последняя конфигурация:将 ESlint 规则作为格式化标准.
• eslint.autoFixOnSave
• editor.codeActionsOnSave

Среди них второйeslint.autoFixOnSaveбыл заброшен. Используя его, предлагается перейти наeditor.codeActionsOnSave.

Можно реализовать и первое, и третье, но больше рекомендуется третьеeditor.codeActionsOnSave, который поддерживает более широкие возможности настройки.

использоватьeditor.codeActionsOnSaveКогда нам нужно отключить другие средства форматирования, лучше всего установить ESlint в качестве средства форматирования по умолчанию. и когда мы это сделаем, мы можем закрытьeditor.formatOnSave, иначе наш файл будет восстанавливаться дважды, что не обязательно.

Далее нам понадобитсяsetting.jsonновая конфигурация. (Закомментированное место является конфигурацией по умолчанию, добавлять не нужно)

// 编辑的时候检测还是保存的时候检测，默认在编辑的时候就检测。 default: onType
// "eslint.run": "onType",

// default: false
// "eslint.format.enable": false,

// default: false
// "editor.formatOnSave": false,

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

// 始终在VSCode的右下角状态栏显示 ESLint 字样，查看 ESLint 运行状态,确保 ESLint 在正常运行
"eslint.alwaysShowStatus": true,

.eslintrc.js

Далее поговорим.eslintrc.jsдокумент. В этом файле будут указаны правила, которые должен использовать наш ESLint для стандартизации нашего кода.

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

Но нам также очень важно понимать смысл каждого правила, например, если вы хотите сами построить новый проект.

Далее я буду普遍用法,Vue项目特殊配置,React项目特殊配置Давайте посмотрим, как настроить.eslintrc.jsдокумент.

обычное использование

• По умолчанию ESLint поддерживает синтаксис ES5. Мы можем переопределить эту конфигурацию,Включение поддержки ES6, ES7....

// 启用对 es6 的语法和全局变量的支持
{
  env: {
    es6: true,
  },
}

• Если мы хотим, чтобы ESLint знал не только о синтаксисе в среде браузера,другая среда (Такие какNode) Мы также хотим, чтобы он распознавался, в этот раз мы можем настроить его так:

{
  env: {
    browser: true,
    node: true,
  },
}

• В некоторых проектах нам нужны специальные синтаксические анализаторы для разбора нашего кода на соответствие спецификации. В этот момент мы можем использоватьParser

{
  parser: 'babel-eslint',
}

• При доступе к неопределенной переменной в текущем исходном файлеno-undefПравило выдаст предупреждение. Если вы хотите использовать глобальные переменные в исходном файле, рекомендуетсяОпределите эти глобальные переменные в ESLint, чтобы ESLint не выдавал предупреждение.

{
  globals: {
    "__DEV__": true,
    "If": true,
    "For": true,
    "POBrowser": true
  },
}

• Поддержка ESLintИспользуйте сторонние плагины. Перед использованием плагина его необходимо установить с помощью npm. При настройке плагина в конфигурационном файле можно использоватьpluginsключевое слово для хранения списка имен плагинов. Название плагина можно не указыватьeslint-plugin-приставка.

{
  	plugins: ['react-hooks', 'jsx-control-statements'],
}

• ESLint поставляется с большим количеством правил. Вы можете использовать аннотации или файлы конфигурацииИзмените правила, которые будут использоваться в вашем проекте.. Чтобы изменить параметр правила, необходимо установить для идентификатора правила одно из следующих значений:
  • "off"или0- закрыть правила
  • "warn"или1- Включите правило для использования ошибок уровня предупреждения:warn(не приведет к выходу из программы)
  • "error"или2- Включите правило, чтобы использовать ошибку уровня ошибки:error(При срабатывании программа выйдет)

{
    rules: {
        eqeqeq: 'off',
        curly: 'error',
        quotes: ['error', 'double']
    }
}

• При настройке правила, определенного в плагине, вы должны использовать插件名/规则IDформа. Например:

{
  plugins: ['react-hooks', 'jsx-control-statements'],
  rules: {
    'arrow-parens': 0,
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'jsx-control-statements/jsx-use-if-tag': 0,
    'react/jsx-no-undef': ['error', { 'allowGlobals': true }],
    'no-prototype-builtins': 'off',
  }
}

• Для ESLint слишком много правил настройки, и если мы настроим свои правила по одному, то эта работа будет очень большой. мы можемИспользовать существующую спецификацию напрямую.

{
  extends: 'zoo/react',
}

Vueспециальная конфигурация

из-заVueСпециальное обозначение для однофайловых компонентов, дляVueПроект, нужно сделать специальную конфигурацию ESLINT для достижения эффекта автоматизации.

Поддержка подсветки синтаксиса

УстановитьVetur插件.

Используйте ESLint вместо Vetur для проверки кода

Ветур дляVueПроект предлагает подсветку синтаксиса и удобные операции. Но он также автоматически включитсяVueКод обнаружения файлов. Это часто конфликтует с нашим настроенным ESLint. Чтобы избежать этого, необходимоsettings.jsonЧтобы выполнить некоторую настройку:

// 不允许它格式化代码
"vetur.format.enable": false,
// 不允许它做代码检测
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

не нужноvueдобавить вeslint.validate,потому чтоeslint.probeобнаружит по умолчаниюvueтип файла.

Затем нам нужно настроить.eslintrc.jsФайл, плагины, используемые в нем, должны быть установлены локально.

module.exports = {
    root: true,
    // 如果是SSR项目，则需要配置node:true
    env: {
        browser: true,
        node: true,
    },
    // 为什么是这样的parser配置？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: 'babel-eslint',
    },
    extends: [
        // 如果是nuxt.js的脚手架项目，则需要安装对应的插件并做以下配置
        '@nuxtjs',
        'plugin:nuxt/recommended',

        // 让eslint可以规范vue文件
        'plugin:vue/base',
        // vue3的项目需要使用，如果是vue2项目，使用 plugin:vue/recommended
        'plugin:vue/vue3-recommended',
    ],
    plugins: [
        // 注意这里不能配置 html 选项，为什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
        'vue',
    ],
    // 配置自己的规则，覆盖上面继承的规则
    rules: {
        // 配置js的缩进为 2，switch case 语句的 case 也使用2个空格缩进
        indent: ['error', 2, { SwitchCase: 1 }],
        // 使用 eslint 检测 template里的代码，这里我配置 2 个空格缩进
        'vue/html-indent': ['error', 2],
    },
};

Приведенную выше конфигурацию вы можете удалить самостоятельно в соответствии с особенностями вашего собственного проекта. Например, если ваш проект неnuxt.jsДа, его можно удалитьextendsвнутренний'@nuxtjsа такжеplugin:nuxt/recommended.

еслиVue cliПроект создан и не используетсяts, вам нужно добавить его в корневой каталог проектаjsconfig.jsonдокумент. СвязанныйjsconfigКонфигурация здесь:jsconfig

Reactспециальная конфигурация

Reactпроект, потому что это.jsфайла, как правило, никакой специальной настройки не требуется. Но даже в этом случае нам все равно нужно что-то делать с правилами использования JSX и хуков.

Для реагирующих хуков

Что именно обеспечивается правилами lint?

eslint-plugin-hooksдаReactИсходный каталогpackagesпредоставленный пакет. Он обеспечивает соблюдение правил хуков, а также является частью API хуков.

npm i eslint-plugin-reack-hooks

существует.eslintrc.jsсередина

module.exports = {
  // eslint-plugin 可以简写
  plugins: ['react-hooks'],
}

Для JSX

JSX простоReactСинтаксический сахар для React, который в конечном итоге будет вызываться React React.createElement для компиляции формы React Element. Итак, до версии 17, если мы использовали JSX, но не представили егоReact, подскажет'React' must be in scope when using JSX. После версии 17 React работал с babel и компилятором TypeScript, чтобы передать задачу преобразования компилятору для автоматического преобразования.

Если мы предыдущая конвертированная версия, мы хотим получить поддержку синтаксиса для JSX, нам нужно установитьeslint-plugin-react, который имеет встроенное определение спецификации кода для JSX.

{
  extends: ['plugin:react/recommended'],
}

Если вы не хотите использовать встроенные правила, мы также можем настроить правила

{
  plugins: ['react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/jsx-no-undef': ['error', { "allowGlobals": true }],
  },
}

Если это новая версия конвертации, вам нужно внести небольшое изменение, чтобы при использовании JSX нас не просили импортироватьReact.

{
  extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
}

StyleLint

После завершения вышеуказанной конфигурации мы можем.jsдокумент,.vueдокументtemplateа такжеscriptМодули реализуют спецификацию кода и автоформатирование при сохранении. Но для.css、.less、.scssФайл и.vueдокументstyleМодули, нам тоже нужно сделать дополнительную настройку, иначе стилевая часть не стандартизирована, и мы не сможем это обнаружить и автоматически исправить.

Что нам нужно сделать, так это:

1. npm i stylelint stylelint-config-standard stylelint-scss.
2. УстановитьStylelint插件.
3. настроить.stylelintrcдокумент.
4. Настройка vscodesetting.jsonдокумент.

Среди них также необходим четвертый шаг, нам нужно сделать следующую настройку:

// 防止编辑器内置的 [css] [less] [scss] 校验和此扩展 [stylelint] 报告相同的错误
"css.validate": false,
"less.validate": false,
"scss.validate": false,

// 保存时使用 eslint 和 stylelint 进行修复
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
// 默认会对很多文件进行检测，这是不必要的，我们只让他检测样式
"stylelint.validate": [
		"css",
		"html",
		"less",
		"postcss",
		"sass",
		"scss",
		"source.css.styled",
		"styled-css",
	],

Выше, наша цель была достигнута!

Prettier

Инструмент форматирования кода. Многие студенты соприкасались с этим инструментом. Лично я глубоко разбираюсь в этом инструменте. Ниже приводится мое личное мнение. Давайте посмотрим на официальное заявление от Prettier.

Так зачем выбирать «Руководство по стилю Prettier» вместо любого другого случайного руководства по стилю? Потому что Prettier — это единственное полностью автоматическое «руководство по стилю». Даже если Prettier не форматирует весь код на 100 % так, как вам хотелось бы, оно того стоит. «жертва» с учетом уникальных преимуществ Prettier, вам так не кажется?

Мы видим, этот инструмент предназначен для того, чтобы позволить различным командам разных компаний учитывать спецификации кода, формат автоматического сохранения. Принесение в жертву персонализированного контента.

Однако разные команды не согласуются в использовании правил.Если все файлы принудительноprettierАвтоматическое форматирование может привести к конфликтам со средствами проверки спецификаций кода, настроенными компанией (такими как ESLint). Фактическая производительность заключается в том, что после автоматического сохранения все еще возникает ошибка формата ESLint.

хочу сделатьprettierДля вступления в силу нам нужно настроить в VSCode:

// 所有文件都使用 prettier 格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 只对 js 文件使用 prettier
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

// 所有文件都不指定自动格式化方式
"editor.defaultFormatter": null,

// js文件不指定自动格式化方式
"[javascript]": {
    "editor.defaultFormatter": null
 }

можно использовать.prettierrcфайлы, VSCodesetting.json,.editorConfigнастроитьprettier.

Для редко используемых типов файлов рекомендуется использоватьprettierформатировать.js,json,jsx,html,css,less,vueПодождите, пока эти файлы будут отформатированы с использованием единой спецификации проекта.

Так что я думаю, что это может быть полностью удалено. Я не знаю, что вы думаете?

Выше все содержание, я надеюсь, что это поможет вам ~

Рекомендуемое чтение

Минимальные запасы для электронной коммерции - реализация SKU и алгоритма

Что нужно знать об управлении проектами

Перекомпоновка и перерисовка рендеринга браузера

Сценарии и приложения для предотвращения дрожания

работы с открытым исходным кодом

• Zhengcaiyun интерфейсный таблоид

адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)

• skuDemo

адрес с открытым исходным кодомGitHub.com/Chinese Patent Medicine-Inc/Reservoir…

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 50 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры с полным стеком, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com