vscode vite vue3 typescript eslint 项目配置

1. 直接创建 vitev3project 为项目名称

// 执行
 yarn create vite vitev3project --template vue

2.  选择vue ——  vue-ts 

vue-ts 

3. 执行连贯操作命令如下

// 复制下面命令：
 cd vitev3project && npm install && npm run dev

4. 见运行效果, 如下: 

5. 安装Eslint 

yarn add eslint

  6. eslint 初始化

yarn eslint --init

选择项如下图蓝色字体

配置完成项目根目录会多出一个 .eslint.cjs表示配置成功, 如下图

7.在VScode安装ESLint和Prettier - Code formatter

8. 在项目下安装 prettier eslint-config-prettier eslint-plugin-prettier

其中安装MAC系统亲测 eslint-config-prettier node 需要切换到  

nvm install 16.14.0依赖安装如下: yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

9.安装完成后 , 在根目录创建.prettierrc 配置以下内容

{"printWidth": 100,// 超过最大值换行"tabWidth": 4,// 缩进字节数"semi": false,// 在语句末尾打印分号"trailingComma": "all",//在多行逗号分隔的句法结构中尽可能打印尾随逗号"""singleQuote": true // 使用单引号而不是双引号
 }

更多规则看官网：Options · Prettier

10. 在VSCODE 点击左上角的：文件=》首选项=》设置，搜索Format On Save，
      打上勾，这样就能实现保存时候自动格式化.

11. 回到项目配置 eslint.cjs,在extends最底部加上"prettier"，覆盖其他配置

eslint 相关配置项: ESLINT OPTIONS