官方脚手架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