Форматирование кода JavaScript

JavaScript Vue.js NPM ESLint

Источник изображения:pixiv 54808053
У каждого может быть свой собственный стиль и формат кода, но проект выполняется более гладко, если все участники проекта придерживаются одного и того же стиля. Не все могут согласиться с каждым правилом формата, и ко многим из них нужно время, чтобы привыкнуть, но важно, чтобы весь проект подчинялся единому стилю программирования, чтобы всем было легко читать и понимать код.

Обновлено 27.07.2018
Впервые опубликовано в блоге Ся Вэй:xiaweiss.com

Из-за большого количества картинок в этой статье, если вам нужно увидеть статью с картинками, пожалуйстаНажмите здесь, чтобы прочитать исходный текст

представлять

Что касается форматирования кода, есть 3 связанных понятия, которые легко спутать

  1. Формат кода: настраиваемый вручную или следуйте общей спецификации. НапримерJavaScript Standard Style,Airbnb JavaScript Style,Google JavaScript StyleЖдать)
  2. Проверка кода: в соответствии с указанным форматом кода используйте подсказку несоответствующего кода (ESLint,TSLint,stylelintЖдать)
  3. Формат кода (формат кода): В соответствии с указанным форматом кода исправьте код, который не соответствует формату (ESLint,PrettierЖдать)

Инструмент форматирования поддерживает режим CLI, его можно найти вpackage.jsonкоманда конфигурации в (Другие параметры режима CLI см. в каждом официальном документе)

"scripts": {
  "standard": "standard --fix",
  "prettier": "prettier --write '*.js'",
  "eslint": "eslint --fix '*.js'"
},

Установите формат кода JavaScript, от простого до строгого, есть следующие методы, выберите один

  1. Используя EditorConfig, добавьте файлы конфигурации.editorconfigВсе, вы можете установить базовый формат детали, а затем использовать формат редактора по умолчанию
  2. Используйте Prettier без обнаружения кода, форматируйте напрямую. Вы также можете добавить файлы конфигурации.prettierrcпользовательский формат
  3. Используйте стандартный стандартный стиль JavaScript и установите его напрямуюnpm install standard --save-dev, не требует никаких файлов конфигурации. Затем используйте стандартный плагин для форматирования (можно не устанавливать проверку кода ESlint)
  4. Используя ESLint, выполните командную строкуnpx eslint --initВы можете инициализировать его, а затем сами выбрать правила конфигурации, после чего будет автоматически сгенерирован файл конфигурации и установлены соответствующие зависимости. И может настроить правила. Затем используйте форматирование плагина (плагин ESLint или Pretter + ESLint одновременно)

.editorconfigПример файла:

root = true

[*]                             # [] 内是正则表达式，匹配文件
charset = utf-8                 # 文本格式
end_of_line = lf                # 配置结尾符号
insert_final_newline = true     # 文件末尾空行
indent_style = space            # 缩进使用空格
indent_size = 2                 # 缩进长度
trim_trailing_whitespace = true # 去掉行尾多余的空格

Для проверки кода CSS вы можете использовать инструмент stylelint. Установитьnpm install stylelint --save-devформат кода установкиnpm install stylelint-config-standard --save-devФайлы Vue также должны иметь установленный препроцессор.npm install @mapbox/stylelint-processor-arbitrary-tags --save-dev

Добавить файл конфигурации.stylelintrc

{
  "defaultSeverity": "warning",
  "processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
  "extends": "stylelint-config-standard",
  "rules": {}
}

Среди них вы можете писать пользовательские правила в правилах, а пользовательские правила имеют наивысший приоритет Если вы хотите создать собственные правила самостоятельно, вы можете посетить веб-сайт https://maximgatilin.github.io/stylelint-config/

Плагин редактора для stylelint, вы можете использоватьstylefmt, также можно отформатировать с помощью Prettier

Ниже приведена конфигурация различных плагинов редактора.

Конфигурация веб-шторма

Включить EditorConfig

Установите плагин EditorConfig, в редакторе настроек -> Стиль кода Установите флажок Включить поддержку EditorConfig. Создайте.editorconfigфайл, перезапустите редактор

Форматирование редактора по умолчанию

Код строки меню -> Код переформатирования Сочетание клавиш Alt + Cmd + L

Более красивое форматирование плагина

1. Установите плагин Prettier Webstorm имеет встроенный подключаемый модуль Prettier, который не нужно устанавливать. Phpstorm можно установить в разделе «Плагины» в Центре настроек.

2. Глобальная установка или установка проекта зависимостей prettier's npm

npm install prettier --save-dev

3. Отформатируйте файл с помощью Prettier Alt + Shift + Cmd + P

Чтобы установить автоматический формат при сохранении: Инструменты -> Наблюдатели за файлами в настройках ручной настройки Вы можете следовать официальному руководству https://prettier.io/docs/en/webstorm.html.

Откройте «Настройки», найдите Prettier и скопируйте путь в пакет Prettier.

Очистите панель поиска и откройте в настройках Инструменты -> Наблюдатели за файлами. Нажмите плюсик ➕ в левом нижнем углу справа и выберите<custom>Новый пользовательский шаблон

Затем вы можете увидеть (обратите внимание, что щелкните треугольную стрелку, чтобы развернуть все параметры)

Настройте, как показано выше, и заполните следующее содержимое, обратите внимание на то, чтобы снять флажок «Автосохранение». Наконец, нажмите «ОК» в правом нижнем углу, чтобы завершить настройку. (Пожалуйста, создайте еще один при использовании Vue, выберите Vue Template для типа файла)

$ProjectFileDir$/node_modules/.bin/prettier
--write $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$

Система Windows должна содержать суффикс cmd, пожалуйста, заполните Программы

$ProjectFileDir$/node_modules/.bin/prettier.cmd

Перезапустите редактор, затем, пока Ctrl + S сохраняет, код может быть автоматически отформатирован

Форматирование ESLint

1. Установите npm-зависимости eslint глобально или внутри проекта.

npm install eslint --save-dev

2. Откройте редактор настроек, как показано на рисунке ниже, найдите пункт конфигурации ESLint, система путей автоматически его обнаружит, просто отметьте Enable (Если пути нет, нужно перезапустить редактор, или вручную указать путь npm-пакета eslint)

3. Перезапустите редактор 4. Установите сочетания клавиш

Рекомендуется сочетание клавиш Ctrl + Alt + F.

Чтобы установить автоматический формат при сохранении: 和 Prettier 配置相同，同样新建一个 File Watcher 即可 参数请填写为

$ProjectFileDir$/node_modules/.bin/eslint
--fix $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$

Система Windows должна содержать суффикс cmd, пожалуйста, заполните Программы

$ProjectFileDir$/node_modules/.bin/prettier.cmd

Перезапустите редактор, затем, пока Ctrl + S сохраняет, код может быть автоматически отформатирован

(Пожалуйста, создайте еще один при использовании Vue, выберите Vue Template для типа файла)

стандартное стандартное форматирование

Установите зависимости npm, обратите внимание, что они должны быть установлены в зависимости разработки

npm install standard --save-dev

Установите стиль кода JS на стандартный (по умолчанию для Webstorm используется стиль Google), источникздесьРасположение параметра показано на рисунке ниже: «Редактор» -> «Стиль кода» -> «JavaScript» -> «Деформация и фигурные скобки» -> «Установить из…». -> Предопределенный стиль -> Стандартный стиль JavaScript

Затем используйте функцию форматирования редактора по умолчанию, Alt + Cmd + L.

Включите проверку кода (необязательно, если не задано, ошибка формата не появится): Откройте интерфейс для настройки ESlint на рисунке выше, установите флажок «Включить» и выберите пакет ESLint в качестве стандартного пути npm.

Одновременное использование Prettier + ESLint

Настройте Prettier и ESLint, как указано выше, и установите для них автоматическое форматирование при сохранении. WebStorm автоматически сначала запустит Pretter, а затем код форматирования ESLint.

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

Включить EditorConfig

Установить плагинEditorConfig for VS Code, перезапустите редактор Создайте.editorconfigдокумент

Форматирование редактора по умолчанию

Сочетание клавиш Shift + Alt + F Или Cmd + Shift + P, чтобы вызвать палитру команд, ввести формат и выбрать «Формат документа».

Более красивое форматирование плагина

Установить плагинPrettier - Code formatterВсе еще используйте Shift + Alt + F

Чтобы установить автоматический переключатель формата: Установить плагинFormatting Toggle, в правом нижнем углу появится кнопка Форматирование, щелкните, чтобы переключить функцию форматирования одним щелчком мыши При нажатии он автоматически изменит файл настроек пользователя, настроит"editor.formatOnPaste": true, "editor.formatOnSave": true,

Если переключатель не установлен, для автоматического форматирования при сохранении требуются настройки: Добавить конфигурацию в настройки в редакторе"editor.formatOnSave": true,Только что

ESlint форматирование

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

Или введите Cmd + Shift+P (выигрыш: Ctrl+Shift+P), чтобы вызвать панель команд, введите команду fix

Также возможно добавить пользовательские конфигурации для автоматического форматирования настроек при сохранении:

"eslint.autoFixOnSave": true,

стандартное стандартное форматирование

Установите зависимости npm, рекомендуется установить их в зависимости разработки

npm install standard --save-dev

Установить плагинJavaScript Standard Style

Введите Cmd + Shift+P (выигрыш: Ctrl+Shift+P), чтобы открыть панель команд и ввести исправление команды. Выберите исправить все автоматически устраняемые проблемы

Рекомендуется добавить пользовательскую конфигурацию:

"standard.usePackageJson": true, // 基于项目的 package.json 设置中来配置
"standard.autoFixOnSave": true, // 保存时自动格式化

Используйте Prettier + Standard одновременно

Настройте Prettier и Standard одновременно и установите

"editor.formatOnSave": true,
"standard.autoFixOnSave": true,

При сохранении файла сначала будет выполнено форматирование Prettier, а затем будет выполнено стандартное форматирование.

Одновременное использование Prettier + ESLint

Настройте Prettier и Standard одновременно, как и раньше, и установите

"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,

Или просто настройте Prettier, установите

"editor.formatOnSave": true,
"prettier.eslintIntegration": false, // 使用 Prettier-eslint 功能

В настоящее время настройка не требуется"eslint.autoFixOnSave": true,

Если вам не нужна подсказка проверки формата, не устанавливайте ееESLintплагин

Конфигурация атома

Редактор не интегрирует плагины форматирования по умолчанию

Включить EditorConfig

Установить плагинeditorconfig, перезапустите редактор Создайте.editorconfigдокумент

Более красивое форматирование плагина

Установить плагинprettier-atom, перезапустите редактор Форматировать с помощью Ctrl + Alt + F

Чтобы установить автоматический переключатель формата: В настройках плагина в разделе «Форматировать при сохранении» установите флажок «Показывать в строке состояния». Внизу редактора будет переключатель автоматического форматирования при сохранении

Форматирование ESLint

Установить плагинliner-eslint, перезапустите редактор Нажмите на проблемную часть, затем нажмите «Исправить», чтобы отформатировать

Чтобы установить автоматический формат при сохранении: В настройках плагина linter-eslint отметьте

стандартное стандартное форматирование

Установите зависимости npm, рекомендуется установить их в зависимости разработки

npm install standard --save-dev

формат Установить плагинstandard-formatterФорматировать код с помощью сочетания клавиш Ctrl + Alt + F

Включите проверку кода (необязательно, если программа не установлена, ошибка формата отображаться не будет): Установить плагинlinter-js-standard

Одновременное использование Prettier + ESLint

Настройте Prettier + ESLint одновременно с предыдущим, и оба включите автоматическое форматирование при сохранении.

Или просто настройте Prettier, а затем проверьте его в настройках Prettier.

В настоящее время нет необходимости устанавливать плагин форматирования ESLint.standard-formatterЕсли вам не нужна подсказка проверки формата, не устанавливайте плагин проверки формата.linter-js-standard

Настройка редактора Stylelint

Установите зависимости npm, рекомендуется установить их в зависимости разработки

npm install stylelint --save-dev

установить профиль.stylelintrcсм. выше

Установите плагин (аналогично приведенной выше конфигурации, обратитесь к вводному документу плагина, поэтому я не буду вдаваться в подробности)

Атом: Плагинstylefmtилиvue-stylefmtилиpretter-atom(Проверьте интеграцию Stylelint в настройках) VScode: плагинstylefmtWebStorm: Настройки -> Язык и FrameWorks -> Таблицы стилей -> stylelint -> Отметьте включение и установите путь к пакету stylelint npm.

Категории