Как настроить Vue CLI 4 с помощью правил ESLint + Airbnb + TypeScript + Stylelint для SCSS в редакторе VS Code с автофиксацией при сохранении?
Примечание: это вопрос, аналогичный моему предыдущему вопросу по теме, который остался частично нерешенным, после чего характер проблемы значительно изменился: как настроить Vue CLI 4 с помощью ESLint + Prettier + Airbnb rules + TypeScript + Vetur?
В 2019 году я был изрядно одержим настройкой инструментария "Святого Грааля" с Vue в TypeScript и наличием VS Code для автофиксации вашего кода в файлах, сохраненных в файлах.vue,.ts и.scss.
Но получение похорошела для оптимальной работы с ESLint и Vetur в конечном итоге слишком много вызов. Из-за внутреннего конфликта с Prettier и ESLint, которые частично имеют одинаковую цель и похожие проверки правил, а также с Vetur, добавляющим больше сложности к этому конкретному миксу в VS Code.
Также, когда настройка в основном работала, довольно раздражало то, что вам приходилось сохранять файл несколько раз подряд. Поскольку после того, как ESLint обнаружил и исправил набор ошибок, появились новые ошибки, и он был недостаточно продвинут, чтобы запускать эти проверки и исправления подряд, пока все не было очищено...
В ноябре 2019 года я был на Vue Conf Toronto, и на семинаре мистера Эвана Deep Dive with Vue 3.0 я должен был спросить его об этой проблеме. Он сказал, что в официальном инструментарии довольно скоро будет проведен капитальный ремонт, и в новых версиях ESLint появятся новые функции...
Он также намекнул, что на данный момент логика автоисправления написана почти для всех проверок правил официального Руководства по стилю Vue, что в сочетании с грядущей полностью модульной архитектурой Vue 3.0 может даже привести к появлению официального расширения VS Code. Или, по крайней мере, упрощает для Vetur и аналогичных плагинов выполнение проверок и исправлений кода за счет использования этих новых возможностей.
В декабре 2019 года обновления плагинов и пресетов Vue CLI 4.1 представили возможности ESLint версии 6 на столе. Что означало, что мы могли бы начать использовать ESLint не только в качестве пуха, но и форматировщика, эффективно снижается потребность в похорошел в наших установках.
В то же время ESLint выпустила версию 2 своего официального расширения VS Code dbaeumer.vscode-eslint, в котором была реализована поддержка действий кода запуска VS Code при сохранении, контролируемыхeditor.codeActionsOnSave -установка.
Итак, наконец, был очищен путь для запуска этой установки! Далее я отвечу на свой вопрос о том, как настроить этот микс.
PS. Хотя возможно, что Vetur все еще можно использовать как часть этой настройки, здесь я перешел на использование Stylelint. По-прежнему существуют некоторые проблемы с функцией автофиксации Stylelint, но, вероятно, они будут решены в будущих обновлениях. Тем не менее, мне все еще интересно услышать, окажется ли Vetur полезным со Stylelint или без него!
1 ответ
Конфигурации официального проекта Vue CLI
После обновлений Vue CLI 4.2 в создании строительных лесов проекта в феврале 2020 года вы наполовину завершили настройку, создав новый проект с глобальнымvue create myproject и сделав хотя бы эти выборы (конфигурации включены ниже):
Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
Less
Stylus
? Pick a linter / formatter config:
ESLint with error prevention only
> ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
Теперь вам может быть интересно, почему я выбрал node-sass по первому предложенному варианту dart-sass- вот почему: вариант препроцессора CSS Vue CLI: dart-sass VS node-sass?
В package.json вам даны по крайней мере эти зависимости:
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-plugin-typescript": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-typescript": "^5.0.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"typescript": "~3.7.5",
"vue-template-compiler": "^2.6.11"
}
С .eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
'@vue/typescript/recommended',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
};
С .editorconfig:
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100
Предвзятые изменения конфигурации для линтинга и форматирования
Итак, с моими предвзятыми модификациями .eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/recommended',
'@vue/airbnb',
'@vue/typescript/recommended',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'class-methods-use-this': 0,
// Changing max row length from 80 to 150.
// Remember to change in .editorconfig also, although am not sure if that file is even needed?
// Especially as scaffolding gave 100 as max len while ESLint default is 80...
'max-len': [
'error',
{
code: 150,
ignoreComments: true,
ignoreUrls: true,
},
],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'@typescript-eslint/ban-ts-ignore': 0,
},
// These are added if you chose also to install Jest plugin for Vue CLI
// With my own modifications here as an example
overrides: [
{
files: [
'./src/**/__tests__/*.spec.{j,t}s',
'./src/**/__mock__/*.{j,t}s',
],
env: {
jest: true,
},
rules: {
'no-unused-expressions': 0,
},
},
],
};
Затем я добавил .eslintignore файл:
# Lint config files in the root ending .js
!/*.js
Затем я добавил этот раздел вверху .editorconfig (пока не уверен, нужен ли этот файл):
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
Установка и настройка Stylelint
Stylelint - это в чем-то похожий проект на CSS/SCSS/SASS/LESS/Stylus, чем ESLint для JavaScript/TypeScript, который также может быть расширен с помощью плагинов и предустановок. У него есть официальное расширение VS Code, и его также можно запускать в процессе сборки Webpack.
Я решил расширить Stylelint пакетом stylelint-scss, который в настоящее время загружается полмиллиона еженедельно, и https://www.npmjs.com/package/stylelint-config-recommended-scss от того же разработчика. Кроме того, я настроил https://www.npmjs.com/package/stylelint-webpack-plugin как часть процесса сборки Webpack.
Установите эти зависимости dev из командной строки: npm i -D stylelint stylelint-config-recommended-scss stylelint-scss stylelint-webpack-plugin
Добавить файл .stylelintrc.json с несколькими предвзятыми модификациями правил в качестве примера (Vue's ::v-deep может потребоваться обработка пользовательского селектора):
{
"extends": "stylelint-config-recommended-scss",
"rules": {
"max-nesting-depth": 4,
"no-descending-specificity": null,
"property-no-unknown": [
true,
{
"ignoreProperties": ["user-drag", "font-smooth"]
}
],
"selector-pseudo-element-no-unknown": [
true,
{
"ignorePseudoElements": ["v-deep"]
}
]
}
}
Создать файл или добавить в vue.config.js, это несколько предвзятых примеров конфигурации:
// Add in the top of the file
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
css: {
loaderOptions: {
sass: {
// Here as example if needed:
// Import Sass vars and mixins for SFC's style blocks
prependData: '@import "@/assets/styles/abstracts/_variables.scss"; @import "@/assets/styles/abstracts/_mixins.scss";',
},
},
},
lintOnSave: process.env.NODE_ENV !== 'production',
productionSourceMap: false,
devServer: {
overlay: {
warnings: true,
errors: true,
},
},
configureWebpack: {
// Fast source maps in dev
devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-eval-source-map',
plugins: [
new StyleLintPlugin({
files: 'src/**/*.{vue,scss}',
}),
],
resolve: {
alias: {
// Alias @ to /src folder for ES/TS imports
'@': path.join(__dirname, '/src'),
},
},
},
};
Редактор VS Code, расширения и настройки
Создайте .vscodeпапка с именем в корне вашего проекта для размещения конкретных настроек проекта и рекомендаций по расширению. Обратите внимание, что если вы открываете VS Code в режиме рабочей области (с одновременным включением нескольких корней проекта), некоторые настройки не работают в этом режиме, поэтому я всегда открываю корень проекта напрямую, без использования режима рабочей области.
В эту папку добавьте файл extensions.json, по крайней мере с этим рекомендованным содержанием, и установите расширения.
{
"recommendations": [
// ESLint - Integrates ESLint JavaScript into VS Code.
"dbaeumer.vscode-eslint",
// Disable eslint rule - Disable eslint rule with one click.
"wooodhead.disable-eslint-rule",
// eslint-disable-snippets - Simple snippets for disable eslint rules
"drknoxy.eslint-disable-snippets",
// Vue - Syntax highlight for Vue.js
"jcbuisson.vue",
// stylelint - Modern CSS/SCSS/Less linter
"stylelint.vscode-stylelint",
// EditorConfig for VS Code - EditorConfig Support for Visual Studio Code
// Not sure if this is needed or recommended,
// but .editorconfig file is still included in the scaffolded project...
"editorconfig.editorconfig",
// DotENV - Support for dotenv file syntax.
"mikestead.dotenv",
]
}
Добавить еще файл settings.json с этими или подобными настройками:
{
// EDITOR
// ----------------------------------------
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
"[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
"[scss]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" },
"[css]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" },
"editor.codeActionsOnSave": {
// https://github.com/microsoft/vscode-eslint/blob/master/README.md#release-notes
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
// ESLINT
// ----------------------------------------
"eslint.enable": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [".html", ".js", ".ts", ".vue"]
},
// VETUR
// Disable rules if user has extension installed and enabled.
// ----------------------------------------
"vetur.validation.template": false,
"vetur.validation.style": false,
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.css": "none",
"vetur.format.defaultFormatter.scss": "none",
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.ts": "none",
// STYLELINT
// ----------------------------------------
"stylelint.enable": true,
"css.validate": true,
"scss.validate": true,
// HTML
// ----------------------------------------
"html.format.enable": false,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html"
},
// FILES
// ----------------------------------------
"files.exclude": {
"**/*.log": true,
"**/*.log*": true,
"**/dist": true,
},
"files.associations": {
".babelrc": "jsonc",
".eslintrc": "jsonc",
".markdownlintrc": "jsonc",
"*.config.js": "javascript",
"*.spec.js": "javascript",
"*.vue": "vue"
},
// The default end of line character. Use \n for LF and \r\n for CRLF.
"files.eol": "\n",
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
}
Итак, это были мои предвзятые настройки проекта, и мне интересно услышать предложения по улучшению!