tl;dr
Вставьте эти настройки в VS Code и настройте ESLint.
// Workplace settings.json { "eslint.enable": true, "editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false, }, "[vue]": { "editor.formatOnSave": false, }, "eslint.autoFixOnSave": true, "eslint.alwaysShowStatus": true, "eslint.validate": [ { "language": "javascript", "autoFix": true }, { "language": "javascriptreact", "autoFix": true }, { "language": "vue", "autoFix": true }, ], "path-autocomplete.pathMappings": { "~": "${folder}/src", "@": "${folder}/src", } }// .eslintrc.js module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/recommended', '@vue/airbnb', ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'max-len': [0], 'import/no-extraneous-dependencies': ['error', { 'optionalDependencies': ['test/unit/index.js'] }], 'import/no-unresolved': 'off', 'no-unused-expressions': ['error', { 'allowTernary': true }], 'no-param-reassign': 0, 'quote-props': ['error', 'consistent'], // vue rules "vue/order-in-components": ["error", { "order": [ "el", "name", "parent", "functional", ["delimiters", "comments"], ["components", "directives", "filters"], "extends", "mixins", "inheritAttrs", "model", ["props", "propsData"], "data", "computed", "watch", "LIFECYCLE_HOOKS", "methods", ["template", "render"], "renderError" ] }], 'vue/html-closing-bracket-newline': ['error', { 'singleline': 'never', 'multiline': 'never' }], 'vue/html-closing-bracket-spacing': ['error', { 'startTag': 'never', 'endTag': 'never', 'selfClosingTag': 'always' }], 'vue/script-indent': ['error', 2, { 'baseIndent': 0, 'switchCase': 1, 'ignores': [] }], 'vue/max-attributes-per-line': [2, { 'singleline': 1, 'multiline': { 'max': 1, 'allowFirstLine': false } }], }, parserOptions: { parser: 'babel-eslint', }, };
Форматирование в коде Visual Studio
Мне нравится, когда мой текстовый редактор автоматически форматирует мой код. Это избавляет меня от мелких ошибок и сохраняет мой код единообразным.
Но каждый раз, когда я настраиваю новый проект, я трачу несколько часов на настройку нового проекта, чтобы он работал так же, как мои предыдущие проекты. Это заставляет меня чувствовать себя не очень продуктивным, поскольку я уже настроил эту настройку для работы над предыдущими проектами.
Особенно сложно настроить приложения Vue.js. Поскольку однокомпонентные файлы имеют разные разделы для разметки, стиля и сценария, требуется немного больше настройки.
Я нашел, что лучший подход для меня - это сделать так, чтобы расширение ESLint для VSC показывало мне ошибки в редакторе, чтобы ESLint устанавливал правила форматирования и чтобы ESLint исправлял все, что он может] (https: // eslint .org / docs / user-guide / command-line-interface # fixing-issues).
Настроить приложение Vue.js
В начале нового проекта я воспользуюсь инструментом Vue.js CLI, чтобы все наладить. После установки запустите новый проект с помощью команды create.
vue create <project-name>Для простоты, вот варианты, которые я выбрал для своего примера проекта.
Выберите предустановку:
- Выбрать функции вручную
Проверьте функции, необходимые для вашего проекта:
- Вавилон
- Линтер / Форматтер
Выберите конфигурацию линтера / форматтера: (это зависит от ваших личных предпочтений)
- Конфигурация ESLint + Airbnb
Выберите дополнительные функции ворса:
- Линт при сохранении
Где вы предпочитаете размещать конфиг для Babel, PostCSS, ESLint и т. Д.?
- В специальных файлах конфигурации
Замечание о Prettier
Prettier только что выпустил поддержку Vue.js, но на момент написания я еще не исследовал возможности. Прежде чем Prettier официально поддержал Vue.js, я потратил несколько часов, пытаясь заставить ESLint и Prettier нормально работать вместе. Но поддержка еще не была готова.
Параметры кода Visual Studio
По умолчанию VS Code форматирует файлы JavaScript. Если вы оставите это включенным, VS Code попытается отформатировать файлы Vue.js, такие как Javascript, а ESLint попытается отформатировать их как файл Vue.js.
Открытие настроек рабочего пространства
Обычно я помещаю эти настройки в рабочую область, чтобы можно было легко изменить конфигурацию для каждого проекта отдельно.
Во-первых, убедитесь, что у вас установлен плагин ESLint для VS Code.
Откройте свои настройки, выбрав Код ›Настройки› Настройки или используя сочетание клавиш cmd + ,. Настройки начинаются с вкладки User Settings, меняем ее на Workplace Settings.
Щелкните значок скобки в правом верхнем углу, чтобы просмотреть страницу настроек в формате JSON. Это упрощает массовое копирование / вставку настроек.
Добавить настройки рабочего пространства
Вот мои настройки по умолчанию для приложений Vue.js:
// Workplace settings.json
{
"eslint.enable": true,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
},
"[vue]": {
"editor.formatOnSave": false,
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.validate": [
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
],
"path-autocomplete.pathMappings": {
"~": "${folder}/src",
"@": "${folder}/src",
}
}"eslint.enable": true- Гарантирует, что ESLint включен для этого проекта.
"editor.formatOnSave": true- Обеспечивает возможность форматирования VS Code при сохранении.
"editor.formatOnSave": false,- Для файлов Vue.js и JavaScript скажите редактору не форматировать при сохранении. Это говорит редактору не использовать средство форматирования по умолчанию для этих файлов, что позволяет нам использовать средство форматирования ESLints.
"eslint.autoFixOnSave": true- ESLint попытается исправить любые проблемы при сохранении.
"eslint.alwaysShowStatus": true- Убедитесь, что ссылка ESLint в нижнем колонтитуле всегда отображается. (Мои личные предпочтения)
"eslint.validate"- Явно укажите ESLint проверять файлы JavaScript, React и Vue, а также разрешить автоматическое исправление.
"path-autocomplete.pathMappings"- Vue.js поставляется с конфигурацией Webpack, которая добавляет псевдоним
@в папку/src. Я хочу, чтобы мой плагин автозаполнения пути распознавал эти псевдонимы.
Конфигурация ESLint
Vue.js CLI настроит базовые правила ESLint при создании проекта. Эти настройки будут либо в файле .eslintrc.js, либо в файле package.json.
Я использую .eslintrc.js, поэтому по умолчанию это выглядит примерно так. (Примечание: будут различия, если вы предпочтете расширить другой набор правил.)
// .eslintrc.js
// Out of the box rules
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};Мои настройки ESLint
Я в основном придерживаюсь правил AirBnB, за некоторыми исключениями.
// .eslintrc.js
module.exports = {
...
extends: [
...,
'@vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'max-len': [0],
'import/no-extraneous-dependencies': ['error', {
'optionalDependencies': ['test/unit/index.js']
}],
'import/no-unresolved': 'off',
'no-unused-expressions': ['error', { 'allowTernary': true }],
'no-param-reassign': 0,
'quote-props': ['error', 'consistent'],
},
...
};Я также придерживаюсь самых строгих правил из Руководства по стилю Vue.
// .eslintrc.js
module.exports = {
...,
extends: [
'plugin:vue/recommended',
],
rules: {
...
// vue rules
"vue/order-in-components": ["error", {
"order": [
"el",
"name",
"parent",
"functional",
["delimiters", "comments"],
["components", "directives", "filters"],
"extends",
"mixins",
"inheritAttrs",
"model",
["props", "propsData"],
"data",
"computed",
"watch",
"LIFECYCLE_HOOKS",
"methods",
["template", "render"],
"renderError"
]
}],
'vue/html-closing-bracket-newline': ['error', {
'singleline': 'never',
'multiline': 'never'
}],
'vue/html-closing-bracket-spacing': ['error', {
'startTag': 'never',
'endTag': 'never',
'selfClosingTag': 'always'
}],
'vue/script-indent': ['error', 2, {
'baseIndent': 0,
'switchCase': 1,
'ignores': []
}],
'vue/max-attributes-per-line': [2, {
'singleline': 1,
'multiline': {
'max': 1,
'allowFirstLine': false
}
}],
},
...
};Вот мои полные настройки ESLint, с которых я начинаю работать в новых проектах.
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/recommended',
'@vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'max-len': [0],
'import/no-extraneous-dependencies': ['error', {
'optionalDependencies': ['test/unit/index.js']
}],
'import/no-unresolved': 'off',
'no-unused-expressions': ['error', { 'allowTernary': true }],
'no-param-reassign': 0,
'quote-props': ['error', 'consistent'],
// vue rules
"vue/order-in-components": ["error", {
"order": [
"el",
"name",
"parent",
"functional",
["delimiters", "comments"],
["components", "directives", "filters"],
"extends",
"mixins",
"inheritAttrs",
"model",
["props", "propsData"],
"data",
"computed",
"watch",
"LIFECYCLE_HOOKS",
"methods",
["template", "render"],
"renderError"
]
}],
'vue/html-closing-bracket-newline': ['error', {
'singleline': 'never',
'multiline': 'never'
}],
'vue/html-closing-bracket-spacing': ['error', {
'startTag': 'never',
'endTag': 'never',
'selfClosingTag': 'always'
}],
'vue/script-indent': ['error', 2, {
'baseIndent': 0,
'switchCase': 1,
'ignores': []
}],
'vue/max-attributes-per-line': [2, {
'singleline': 1,
'multiline': {
'max': 1,
'allowFirstLine': false
}
}],
},
parserOptions: {
parser: 'babel-eslint',
},
};Заключение
Этот пост в основном предназначен для меня, чтобы я мог найти место, куда я могу пойти и вспомнить, какие настройки имеют значение, чтобы у меня всегда было правильное форматирование, когда я работаю над новым проектом Vue.js. Если это также поможет вам в настройке, это прекрасно! Привет, пять!
