vscode + vite + vue3 + typescript + eslint 项目配置_vscode 配置vue3和typescript环境

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",//在多行逗号分隔的句法结构中尽可能打印尾随逗号"<es5|none|all>"
  "singleQuote": true // 使用单引号而不是双引号
}

更多规则看官网：Options · Prettier

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

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

eslint 相关配置项: ESLINT OPTIONS