ESLint + Prettier + VS Code + единый стиль кода Vue-cli, автоматическое форматирование

Visual Studio Code

Сначала убедитесь, что у вас установлен VS Code

Используемые плагины:

  • Vetur
    • поставка.vueПоддержка подсветки синтаксиса для Vue.js, плагина, разработанного Пайн Ву, одним из основных членов команды Vue.js.
  • ESLint
  • Prettier

Установить Ветур

В этот момент мы используемVS Codeоткрыть проект,.vueфайлы выделены серым цветом, потому что VS Code не.vueПодсветка синтаксиса для файлов.

Итак, вам нужно установитьVeturЭтот плагин помогает нам. Откройте магазин плагинов слева.

Затем найдите «Ветур», выберите его в результатах поиска и нажмите «установить». Затем нажмите «Перезагрузить».

В это время наш.vueВ файле есть подсветка синтаксиса.

Кроме того,VeturЕсть несколько фрагментов кода, где мы вводим слово «scaffold» в файле .vue и нажимаем Enter, что автоматически заполняет файл скелетом или каркасом одного компонента файла .vue.

Установите ESLint и Prettier

В расширенном магазине мы будем искать ESLint, а затем приступим к его установке. Красивее тот же шаг. После установки мы перезагрузим VS Code.

Настроить ESLint

В файле .eslintrc.js в корне нашего проекта добавляем:'plugin:prettier/recommended', что позволит включить поддержку Prettier в ESLint.

    module.exports = {
      root: true,
      env: {
        node: true
      },
      'extends': [
        'plugin:vue/essential',
        'plugin:prettier/recommended', // we added this line
        '@vue/prettier'
      ],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Настроить красивее

Мы также можем создать профиль Prettier, чтобы добавить некоторые специальные настройки, основанные на нашем личном стиле или предпочтениях команды.
Также создайте в корневом каталоге проекта.prettierrc.js

module.exports = {
    singleQuote: true,
    semi: false
}

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

пользовательские настройки

Чтобы еще больше оптимизировать опыт разработки VS Code, мы добавим некоторые конфигурации в пользовательские настройки.Предпочтения >>> Настройки >>> Пользовательские настройки,Войтиsettings.jsonв файле.
Сначала отключите функцию линтинга Vetur и добавьте:

"vetur.validation.template": false

Теперь мы хотим сообщить ESLint, какие языки (vue, html и javascript) мы хотим проверить, и установить для autoFix значение true для каждого языка:

"eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    }
],

Затем установите ESLint autoFixOnSave.

"eslint.autoFixOnSave": true,

А самому нашему редактору выставляем формат OnSave.

"editor.formatOnSave": true,

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

Больше настроек

Вы можете настроить VS Code на автоматическое сохранение:

"files.autoSave": "onFocusChange", // 编辑器失去焦点时保存，还有其他选项，请根据个人需要更改

Выберите при использовании vue-cli для создания проекта ESLint + Prettier с указанной выше конфигурацией.

Установить интерфейс командной строки

Чтобы использовать CLI, вам необходимо установить Node.js версии 8 или выше (рекомендуется 8.10.0+).

Выполните следующие команды в терминале:

npm i -g @vue/cli

Создать vue-проект

Выполните следующие команды в терминале:

vue create xxx      // xxx为项目名称，例如 vue-project

Затем нам было предложено выбрать предустановку по умолчанию или вручную выбрать функцию. Клавишей со стрелкой вниз вручную выбираем функцию и нажимаем Enter.

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

Линтер/Форматтер — это стиль кода. Мы будем использовать ESLint + Prettier

Мы добавим дополнительный функционал Lint при сохранении.

Мы подберем индивидуальные профили.

Мы можем выбрать, будут ли сохранены все настройки при следующем построении проекта напрямую. Нет необходимости, на выбор N

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

Здесь мы выбираемnpmв качестве менеджера пакетов.

После того, как проект создан,cdПерейдите в корневой каталог проекта, например:cd vue-projectЗатем выполните команду в корневом каталоге:npm run serveЗапустите проект, и браузер откроется:localhost:8080Вы можете увидеть первоначальный проект.

Категории