Проекты Vue используют eslint + prettier для стандартизации стиля кода

внешний интерфейс Ресурсы изображений Vue.js ESLint

написать впереди

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

К счастью, у нас есть eslint и красивее.

eslint VS prettier

Большинство проектов уже должны использовать eslint для проверки качества кода, и, возможно, некоторые будут использовать его для определенной степени унифицированного стиля. Так зачем тебе красивее? Сначала кратко рассмотрим их.

различные линтеры

В общем, у линтеров есть две возможности:

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

Среди них, в документе eslint, правило со значком гаечного ключа — это правило, которое eslint может восстановить автоматически. Без правила значка eslint может выдавать только ошибки или предупреждения, которые затем вручную исправляются разработчиком.

prettier

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

Конфигурация проекта

В качестве примера здесь используется проект vue.

1. Сначала настройте eslint

Если ваш проект сгенерирован с помощью vue cli и вы решили использовать eslint, то .eslintrc.js будет сгенерирован в корневом каталоге проекта по умолчанию. Если нет, вы также можете создать этот файл и файл .eslintignore в корневом каталоге проекта.

Здесь я использую eslint-plugin-vue и выбираю правило vue/strongly-recommended.

npm install --save-dev eslint eslint-plugin-vue@next

// .eslintrc.js

extends: {
    'plugin:vue/strongly-recommended'
}


// .eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

Если вы хотите, чтобы eslint автоматически исправлял код при перекомпиляции, вам нужно добавить eslint в конфигурацию веб-пакета и установитьfix: trueи включите eslint в devserver.

// config/index.js

module.exports = {
  dev: {
    useEslint: true,  
  }
}


// webpack.base.conf.js

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay,
    fix: true,
  }
})

Во-вторых, настроить красивее

Из-за использования eslint стиль кода не может быть в наибольшей степени унифицирован, поэтому нам нужно ввести красивее.

npm install --save-dev prettier

Настройте красивее в соответствии с фактическими потребностями

//prettier.config.js

module.exports = { 
  "printWidth": 80, // 每行代码长度（默认80）
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": false, // 是否使用tab进行缩进（默认false）
  "singleQuote": true, // 使用单引号（默认false）
  "semi": true, // 声明结尾使用分号(默认true)
  "trailingComma": "all", // 多行使用拖尾逗号（默认none）
  "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

Вам нужно настроить команду для вызова красивее для форматирования в package.json

// package.json

"scripts": {
  "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
}

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

3. Настройте хаски и lint-staged

Из-за прямого использования prettier для форматирования кода все же есть некоторые недостатки, такие как:

  1. Форматировать все файлы за один раз.Если красивее добавить в середине проекта, некоторые коды, которые уже были написаны, будут отформатированы, что может вызвать конфликты или какие-то непредсказуемые проблемы и снизить стабильность проекта.
  2. Каждый раз, когда вам нужно вводить формат запуска npm для форматирования кода, возникают дополнительные операции, и опыт разработки не очень хорош.

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

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

lint-staged, официальное описание — это сторонняя библиотека, которая может использовать линтер для кода, отправленного git, который полагается на хаски для использования git-хуков. Здесь мы можем не только использовать его для вызова линтеров, но и вызывать prettier для форматирования кода.

npm install --save-dev lint-staged husky


// package.json

"scripts": {
    "precommit": "lint-staged"  // precommit钩子执行lint-staged
},
"lint-staged": {
    "src/**/*.{js,json,css,vue}": [
      "prettier --write",  // 先执行prettier，再执行eslint，保证代码质量
      "eslint --fix",
      "git add"
    ]
},

В-четвертых, используйте конфигурацию eslint и prettier одновременно

Так как prettier и eslint необходимо использовать одновременно, а некоторые правила prettier могут конфликтовать с некоторыми правилами eslint, необходимо отключить некоторые правила форматирования кода eslint, которые могут конфликтовать с prettier. Здесь используются eslint-plugin-prettier и eslint-config-prettier.

eslint-plugin-prettier может устанавливать правила prettier в соответствии с правилами eslint и подсказывает те, которые не соответствуют правилам. (то же, что и eslint-plugin-vue)

eslint-config-prettier может отключить правила форматирования кода, которые eslint может конфликтовать с prettier. Официально eslint-plugin-prettier нужно съедать с eslint-config-prettier для достижения наилучших результатов.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

// .eslintrc.js
module.exports = {
    extends: [
        'plugin:vue/strongly-recommended',
        'plugin:prettier/recommended'
    ]
    rules: {
        "prettier/prettier": "error"
    }
}

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

Общий файл конфигурации


npm install -D prettier husky lint-staged eslint-config-prettier eslint-plugin-prettier


// package.json

{
  "scripts": {
    "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,json,css,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "eslint": "^4.15.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-vue": "^4.0.0",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "prettier": "^1.14.2",
  },
}


// eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  extends: [
    'plugin:vue/strongly-recommended',
    'plugin:prettier/recommended'
  ],
  // add your custom rules here
  rules: {
    // ...other codes
    "prettier/prettier": "error"
  }
}


//prettier.config.js

module.exports = { 
  "printWidth": 80, // 每行代码长度（默认80）
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": false, // 是否使用tab进行缩进（默认false）
  "singleQuote": true, // 使用单引号（默认false）
  "semi": true, // 声明结尾使用分号(默认true)
  "trailingComma": "all", // 多行使用拖尾逗号（默认none）
  "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

напиши в конце

Как правило, если в среду IDE интегрированы инструменты eslint или prettier, она по умолчанию проверяет код в соответствии с соответствующими файлами конфигурации в корневом каталоге проекта.

Если вы используете vscode, стиль кода vetur по умолчанию использует более красивый, который автоматически извлечет более красивый файл конфигурации в корневом каталоге проекта для форматирования. Инструмент поиска eslint рекомендует использовать плагин eslint, который после установки автоматически извлечет файл конфигурации eslint для проверки кода, что очень удобно.

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

Если есть лучший и более удобный способ унификации стиля кода, дайте мне знать, спасибо!

Категории