Ставить точку с запятой или не ставить точку с запятой? табуляция или пробел? Вы все еще с красным лицом спорите со своими коллегами о стиле кодирования?
Перед текстом отдохнем, прочитав абзац:иди к черту! Вы еретик!
Я вспомнил, что когда я впервые пришел в индустрию, я проверил код из svn и увидел код, написанный моим коллегой, фигурные скобки на самом деле переносятся. Я внутренне ругался, это человек **, зачем брекеты заворачивать? Молодой и энергичный, я был полон гнева и удалял пустые строки одну за другой. Но когда дело доходит до стиля программирования, трудно сказать, кто прав, а кто виноват, у разных людей разные предпочтения, только обязательные требования могут избежать споров.
Поэтому команды должны следовать двум основным принципам в отношении стиля кода:
- меньшинство подчиняется большинству;
- Объедините стиль с помощью инструментов.
В этой статье будет рассказано, как использовать ESLint + Prettier для унификации стиля внешнего кода.
Что такое красивее?
Во-первых, большинство соответствующих ESLint знакомы и используются для проверки кода, а вот Prettier (дословно переводится как «красивее» 😂) может быть менее на слуху. Как гибкий и слабо типизированный язык, js имеет множество странных стилей кода.Тысячи людей пишут js тысячами способов. Хотя у js нет официально рекомендованной спецификации кода, в сообществе есть некоторые популярные спецификации кода, такие какstandardjs,airbnb. Использование ESLint с этими спецификациями может выявить потенциальные проблемы в коде и улучшить качество кода, но не может полностью унифицировать стиль кода, поскольку в этих спецификациях кода основное внимание уделяется не стилю кода (хотя есть некоторые ограничения).
Давай запустим Амвей, Красавица.
Prettier — это мощный инструмент, способный полностью унифицировать стиль кода вас и ваших коллег. код построчно, даже если вам действительно нужно изменить, что делать с вашими потребностями, поэтому никто не хочет тратить время на поддержание согласованности стиля кода. Выбирая Prettier, вы можете сэкономить время, чтобы написать больше ошибок (нет, исправить больше ошибок), а единый стиль кода может обеспечить читабельность кода.
Посмотрите, что сделал Prettier.
может поддерживать jsx
Также может поддерживать css
Единственное сожаление заключается в том, что часть шаблона файла шаблона vue пока не может быть отформатирована. 🤔
Использование ESLint с Prettier
В первую очередь необходимо установитьprettier, а в вашем проекте уже используется ESLint, естьeslintrc.jsконфигурационный файл.
npm i -D prettier
Определяйте стиль кода с помощью ESLint
Установите плагин:
npm i -D eslint-plugin-prettier
Плагин eslint-plugin-prettier вызовет prettier для проверки стиля вашего кода. Принцип заключается в том, чтобы сначала использовать prettier для форматирования кода, а затем сравнить его с кодом перед форматированием. Если есть какое-либо несоответствие, это место будет отмечен красивее.
Далее нам нужно добавить в правила,"prettier/prettier": "error", указывая на то, что сообщение об ошибке выдается в месте, отмеченном более красивым.
//.eslintrc.js
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
С помощью функции автофикса ESLint при сохранении кода автоматически исправит место, где выдается ошибка. Поскольку наш проект вводит eslint-loader в webpack для запуска eslint, нам нужно лишь немного изменить конфигурацию webpack, чтобы автоматически форматировать код каждый раз, когда мы сохраняем код при запуске webpack-dev-server.
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.join(__dirname, 'src')],
options: {
fix: true
}
}
]
}
Если ваш eslint запускается напрямую через cli, то вам нужно только после него добавить исправление, например:eslint --fix.
Что делать, если есть конфликт с существующим плагином
npm i -D eslint-config-prettier
Используя конфигурацию eslint-config-prettier, вы можете отключить некоторые ненужные или конфликтующие параметры lint с prettier. Таким образом, мы не видим, чтобы некоторые ошибки появлялись дважды одновременно. При его использовании нужно убедиться, что эта конфигурация является последним пунктом расширения.
//.eslintrc.js
{
extends: [
'standard', //使用standard做代码规范
"prettier",
],
}
ВотДокументация, в котором перечислены элементы конфигурации, которые будут конфликтовать с prettier.
Используйте вышеуказанные две конфигурации одновременно
Если вы одновременно используете две вышеупомянутые конфигурации, вы можете упростить свою конфигурацию следующими способами.
//.eslintrc.js
{
"extends": ["plugin:prettier/recommended"]
}
Наконец, вставьте полную конфигурацию в наш проект, который модифицирован на основе кода, сгенерированного vue-cli, и использует стандарт в качестве спецификации кода:
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
es6: true
},
extends: [
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard',
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
"plugin:prettier/recommended",
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"prettier/prettier": "error",
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
Какой? В вашем проекте не включен ESLint
Не паникуйте, не бойтесь, если у вас нет ESLint, вы можете пройтиonchangeОтслеживайте код, а затем автоматически форматируйте код. Просто добавьте следующий код в скрипты в package.json и используйтеnpm run format, мы можем отслеживать все файлы js в каталоге src и форматировать их:
"scripts": {
"format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}
Если вы хотите отформатировать не только файлы js, вы также можете добавить несколько списков файлов.
"scripts": {
"format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}
Конечно, вы также можете настроить поддержку красивее в редакторе, какие редакторы поддерживаются, пожалуйста, нажмитездесь
Как настроить красивее
Существует три способа поддержки конфигурации Prettier:
- создание корневого каталога
.prettierrcфайл, может писать YML, формат конфигурации JSON и поддерживает.yaml/.yml/.json/.jsсуффикс; - создание корневого каталога
.prettier.config.jsфайл и экспортировать объект извне; - существует
package.jsonЧжунсинprettierАтрибуты.
Ниже мы используемprettierrc.jsспособ настроить красивее, и объяснить роль каждой конфигурации.
module.exports = {
"printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
"tabWidth": 2, //一个tab代表几个空格数，默认为80
"useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
"singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
"semi": true, //行位是否使用分号，默认为true
"trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
"bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
"parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}
В конфигурации они примерно перечислены, а некоторые другие конфигурации можно найти вофициальная документацияПроверьте это.
Обратите внимание, что на официальном сайте элементов конфигурации парсера перечислены следующие параметры:
- babylon
- flow
- typescript Since v1.4.0
- postcss Since v1.4.0
- json Since v1.5.0
- graphql Since v1.5.0
- markdown Since v1.8.0
Но если вы используете одно файловую компонентную форму Vue, не забудьте добавитьparserНастроил vue, текущих официальных документов нет в списке. Конечно, если вы написали парсер AST, вы также можете написать свой собственныйparser: require("./my-parser").
Суммировать
С красивее мы уже не можем завидовать коллегам, которые пишут golang по соседству.После сохранения мы можем автоматически форматировать, и нам не нужно спорить с коллегами, потому что код проекта не унифицирован, потому что мы используем стиль красивее единообразно . Могут быть некоторые вещи, которые вы не можете понять поначалу, но это не имеет значения, подумайте, что это все ради командной гармонии, мира во всем мире, и жертвы, которые мы приносим, необходимы. И стиль красивее был принят во многих крупных проектах с открытым исходным кодом, таких как react, webpack, babel.
Видишь ли, они все в ходу, чего ты ждешь, если хочешь стать еретиком и сгореть заживо, не спеши. Для получения более интересного контента см.Официальная ссылка