[GN] 使用vue3+vite+ts+prettier+eslint
学习目标：
做到代码格式等统一，此时，esint和prettier就要登场了。
学习内容：
eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。
prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。
=> 安装prettier+eslint包，并做一系列的配置
学习时间：
- 创建项目
yarn create vite
选择vue 作为 framework
选择 vue-ts
- 是package.json中配置的eslint和prettier相关的包：
{
"name": "xxx",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"@vitejs/plugin-vue": "^4.1.0",
"eslint": "^8.37.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-vue": "^9.10.0",
"prettier": "^2.8.7",
"prettier-eslint": "^15.0.1",
"typescript": "^4.9.3",
"vite": "^4.2.0",
"vue-eslint-parser": "^9.1.1",
"vue-tsc": "^1.2.0"
}
}
命令：
yarn add
@typescript-eslint/eslint-plugin
@typescript-eslint/parser eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-vue prettier prettier-eslint vue-eslint-parser -D
当这些依赖包安装完成后，然后辅助配置了。
- 使eslint生效，我们需要在根目录创建.eslintrc.cjs文件。
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
overrides: [],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/multi-word-component-names': 'off',
'prettier/prettier': 'error',
'@typescript-eslint/no-explicit-any': 'off'
}
}
如果某些文件不想做校验，可以创建.eslintignore来屏蔽。
public
node_modules
dist
src/assets/*
build/*
- 个性化prettier，要创建.prettier.cjs。
module.exports = {
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使用单引号
"printWidth": 80, // 超过最大值换行
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 结尾不用分号
"trailingComma": "none", // 函数最后不需要逗号
"arrowParens": "avoid", // 箭头函数参数只有一个时，不需要括号
"bracketSpacing": true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
"jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"jsxSingleQuote": true, // 在jsx中使用单引号代替双引号
"proseWrap": 'preserve', //代码超出是否要换行 preserve保留
};
最后在.vscode目录下创建settings.json做统一配置
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"less",
"css",
"scss",
"json",
"jsonc"
],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}