vite项目配置eslint+prettier

更新

2023-09-25

使用pnpm搭建

npm install pnpm -g // 安装pnpm
pnpm create vue@latest //搭建vue脚手架

工欲善其事，必先利其器，早期搭建好项目配置对之后的开发有非常多的好处，就先介绍一下目前我认为用起来比较舒服的一套项目配置

npm init vue@latest  //搭建vue脚手架

根据提示安装TypeScript+Vue Router+ESLint+Prettier

用vscode进入项目

npm i  //安装依赖

给vscode安装插件

1. Eslint
2. TypeScript Vue Plugin (Volar)
3. Prettier - Code formatter

在vscode中设置保存后自动格式化

右键-使用…格式化文档，点击配置默认格式化程序，选择Prettier - Code formatter

这样每次在保存时就可以自动格式化代码了

有时候默认的代码格式并不一定好用，可以上这个网站 https://www.prettier.cn/ 手动创建一个合适的配置，创建完以后生成json，将json复制到根目录下的.prettierrc.json，这样就可以根据喜好和需求调整代码格式

{
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": false,
    "singleAttributePerLine": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": true
  }

如果之前有装过Vetur这个插件，建议不启用，会和vue3产生冲突，建议使用Vue Language Features (Volar)插件，高亮vue3代码。

调整eslint规则，在根目录下修改.eslintrc.cjs文件，关闭默认检测组件名称命名规范

rules: {
    'vue/multi-word-component-names': 'off'
}