原来一直使用Vue2开发项目，并且没有经历过自己手动创建项目，以前都是直接在vue-element-admin或者antd-admin官方给出的源码上做修改，由于各种依赖、插件，项目中集成的都有，所以没有关注过这方面的写法，最近在家休息，也没事可干，就自己想着搭建一个vue3+vite2的项目来玩玩，一上手就感觉好多东西都玩儿不了，首先说说这个代码自动格式化吧？费了老大劲儿了。在这个过程中记录了一些步骤，希望能给新入手的朋友带来一些帮助。
项目的创建就不一步步的说明了，您可以参照Vite中文网 (vitejs.cn),官方给的信息还是比较详细易上手的。
- 我们在项目总安装如下依赖：
（1）安装ESLint：
npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
（2）安装Prettier
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
- 我们在根目录下新建.eslintrc.js文件
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
parserOptions: {
parsar: '@typescript-eslint/parsar',
ecmaVersion: 2020,
sourceType: 'module'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
- 在项目跟目录下新建 .prettierrc.js 文件
module.exports = {
printWidth: 120, // 换行字符串阈值
tabWidth: 2, // 设置工具每一个水平缩进的空格数
useTabs: false,
semi: false, // 句末是否加分号
vueIndentScriptAndStyle: true,
singleQuote: true, // 用单引号
trailingComma: 'none', // 最后一个对象元素符加逗号
bracketSpacing: true,
jsxBracketSameLine: true, // jsx > 是否另取一行
arrowParens: 'always', // 不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头加入 @prettier
endOfLine: 'auto' // 换行符使用 auto 有些地方说的是推荐使用lf
}
- 在根目录下新建一个.vscode文件夹。在里面再新建一个.settings.json，用来设置vscode的全局配置,字体大小什么的可以根据自己的喜好定义。
{
"editor.fontSize": 20, // 编辑器字体大小
"terminal.integrated.fontSize": 18, // terminal 框的字体大小
"editor.tabSize": 2, // Tab 的大小 2个空格
"editor.formatOnSave": true, // 保存是格式化
"prettier.singleQuote": true, // 单引号
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact"
],
}
- 重启vscode 即可生效。
先这样了，接下来有时间了玩玩husky，以前没有用过，看网上的介绍有意思的，有好的文章可以推荐一下，谢谢
