学习目标：

做到代码格式等统一，此时，esint和prettier就要登场了。

---

学习内容：

eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。
prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。

=> 安装prettier+eslint包，并做一系列的配置

---

学习时间：

1. 创建项目

yarn create vite

选择vue 作为 framework
选择 vue-ts

2. 是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

当这些依赖包安装完成后，然后辅助配置了。

3. 使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/*

4. 个性化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"}
}

---