官方脚手架Vue CLI项目的配置
在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 文件：
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,
'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,
},
overrides: [
{
files: [
'./src/**/__tests__/*.spec.{j,t}s',
'./src/**/__mock__/*.{j,t}s',
],
env: {
jest: true,
},
rules: {
'no-unused-expressions': 0,
},
},
],
};
接着我添加了 .eslintignore 文件：
!/*.js
接着我在 .editorconfig 文件的顶部添加了这个部分（不确定是否需要这个文件）：
root = true
安装和配置Stylelint
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，其中包含一些带偏见的规则修改作为示例（Vue的::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，以下是一些偏见的配置示例：
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
css: {
loaderOptions: {
sass: {
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: {
devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-eval-source-map',
plugins: [
new StyleLintPlugin({
files: 'src/**/*.{vue,scss}',
}),
],
resolve: {
alias: {
'@': path.join(__dirname, '/src'),
},
},
},
};
VS Code编辑器、扩展和设置
在项目根目录中创建名为.vscode的文件夹，用于放置项目特定的设置和扩展推荐。请注意，如果您以工作区模式打开VS Code（同时包含多个项目根目录），则某些设置在此模式下不起作用，因此我总是直接打开项目根目录，而不使用工作区模式。
在此文件夹中添加一个extensions.json文件，并至少添加以下内容进行推荐，并安装这些扩展程序。
{
"recommendations": [
"dbaeumer.vscode-eslint",
"wooodhead.disable-eslint-rule",
"drknoxy.eslint-disable-snippets",
"jcbuisson.vue",
"stylelint.vscode-stylelint",
"editorconfig.editorconfig",
"mikestead.dotenv",
]
}
新增一个名为settings.json的文件，并添加以下或类似设置：
{
"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": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"eslint.enable": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [".html", ".js", ".ts", ".vue"]
},
"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.enable": true,
"css.validate": true,
"scss.validate": true,
"html.format.enable": false,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html"
},
"files.exclude": {
"**/*.log": true,
"**/*.log*": true,
"**/dist": true,
},
"files.associations": {
".babelrc": "jsonc",
".eslintrc": "jsonc",
".markdownlintrc": "jsonc",
"*.config.js": "javascript",
"*.spec.js": "javascript",
"*.vue": "vue"
},
"files.eol": "\n",
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
}
所以这些是我的偏见项目设置，我很想听到改进建议！
.ts文件。我不得不像这里建议的那样在settings.json中添加"eslint.validate": ["typescript"]。这似乎是 eslint 中的一个 bug。 编辑：删除了我之前关于 html 格式化无法工作的评论（它确实可以工作）。 - andy-bc.eslintrc.js和带有@ux.engineer的“偏执”更改的版本之间的区别--plugin:vue/essential=>plugin:vue/recommended。这为我解决了问题，您可以在此处查看具体规则-https://eslint.vuejs.org/rules/ - launchoveriteslint-config-airbnb-typescript代替@vue/airbnb会更好，因为@vue/airbnb没有eslint-config-airbnb-typescript具有的 TypeScript 特定规则。 - wube