ux.*_*eer 23 javascript typescript eslint vue.js vue-cli
注意：这是一个与我之前关于该主题的问题类似的问题，该问题部分未解决，之后挑战的性质发生了很大变化：如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4？
在 2019 年，我非常着迷于在 TypeScript 中使用Vue配置“圣杯”工具设置，并让VS Code 自动修复您的代码，保存在 .vue、.ts 和 .scss 文件中。
但要更漂亮与工作最佳ESLint和Vetur结束了太多的挑战。因为 Prettier 和 ESLint 的固有冲突具有部分相同的目标和类似的规则检查，并且 Vetur 为 VS Code 中的这种特定组合增加了更多复杂性。
此外，当设置大部分工作时，您需要连续多次保存文件是相当令人恼火的。因为一旦 ESLint 发现并修复了一组错误，就会出现新的错误，并且它不够先进，无法连续运行这些检查和修复，直到所有错误都被清除......
2019 年 11 月，我参加了多伦多 Vue Conf 会议，在 Evan 先生的研讨会 Deep Dive with Vue 3.0 中，我向他询问了这个问题。他说官方工具很快就会进行大修，新版本的 ESLint 将会有新功能......
他还暗示，在这一点上，几乎所有 Vue 官方样式指南的规则检查都写入了自动修复逻辑，结合即将推出的 Vue 3.0 完全模块化架构，甚至可能会看到官方 VS Code 扩展的到来。或者至少通过利用这些新功能使 Vetur 和类似插件更容易运行代码检查和修复。
2019 年 12 月，Vue CLI 4.1 插件和预设升级带来了 ESLint 版本 6 功能。这意味着我们可以开始将ESLint 不仅用作 linter，而且还用作格式化程序，从而在我们的设置中有效地减少对Prettier的需求。
与此同时，ESLint 发布了其官方 VS Code 扩展dbaeumer.vscode-eslint 的第 2 版，支持 VS Code在 save -feature上运行代码操作，由editor.codeActionsOnSave-setting控制。
因此，最终清除了运行此设置的路径！接下来，我将回答我自己关于如何配置此混合的问题。
附注。虽然 Vetur 仍然可以用作此设置的一部分，但这里我已更改为使用 Stylelint。Stylelint 的自动修复功能仍然存在一些问题，但很可能会在未来的更新中得到解决。然而，我仍然很想知道 Vetur 是否会在使用或不使用 Stylelint 的情况下被证明有用！
ux.*_*eer 36
在 2020 年 2 月创建项目脚手架中的 Vue CLI 4.2 升级后，您通过使用全局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？原因如下： Vue CLI CSS 预处理器选项：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：
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
与.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：
"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"
}
然后我添加了.eslintignore文件：
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
Stylelint是一个类似于 CSS/SCSS/SASS/LESS/Stylus 的项目，而不是 ESLint 用于 JavaScript/TypeScript，同样可以通过插件和预设进行扩展。它有一个官方的 VS Code 扩展，也可以在你的 Webpack 构建过程中运行。
我选择使用stylelint-scss 包扩展 Stylelint ，它目前每周下载量达50 万次，以及来自同一维护者的stylelint-config-recommended-scss 包。此外，我已将stylelint-webpack-plugin配置为 Webpack 构建过程的一部分。
通过以下方式从命令行安装这些开发依赖项： npm i -D stylelint stylelint-config-recommended-scss stylelint-scss stylelint-webpack-plugin
添加一个.stylelintrc.json带有一些偏向规则修改的文件作为示例（::v-deep可能需要Vue 的自定义选择器处理）：
{
"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，这是一些有偏见的配置示例：
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,
},
},
],
};
.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,
}
所以这些是我有偏见的项目设置，我有兴趣听取改进建议！
| 归档时间： |
|
| 查看次数： |
14620 次 |
| 最近记录： |