vite+vue3+typescript+prettier

1. 创建项目

npm init vite

vite参考: http://www.vitejs.net/guide/#scaffolding-your-first-vite-project

• 按提示一步步操作

  # 输入项目名称，如vite-test
  ? Project name: » vite-test
  # 选择框架，如Vue
  ? Select a framework: » - Use arrow-keys. Return to submit.
      Vanilla
  >   Vue
      React
      Preact
      Lit
      Svelte
  # 这里 TypeScript 然后回车，创建完成
  ? Select a variant: » - Use arrow-keys. Return to submit.
      JavaScript
  >   TypeScript
      Customize with create-vue
      Nuxt

   

• 进入目录，安装插件

  cd vite-test
  
  npm i

   

• 更新一些插件版本，这一步不是必要

  # vite版本更新太快，这一步非必要
  npm i @vitejs/plugin-vue typescript vite
  # 更新vue-tsc，这一步也非必要
  npm uninstall vue-tsc
  npm i vue-tsc -D

 

2. 安装 eslint与prettier

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier vite-plugin-eslint -D

 

• eslint： 安装 eslint 支持

• @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue： ts vue 相关支持

• prettier: 安装 prettier 支持

• eslint-config-prettier：解决 eslint 和 prettier 冲突

• vite-plugin-eslint：配合vite解决 .vue文件的验证

 

3. 相关配置

• 初始化eslint

  npm init @eslint/config

  按提示一步步进行

  # 默认选第二个就行
  ? How would you like to use ESLint? ...
    To check syntax only
  > To check syntax and find problems
    To check syntax, find problems, and enforce code style
  # 这里选 JavaScript
  ? What type of modules does your project use? ...
  > JavaScript modules (import/export)
    CommonJS (require/exports)
    None of these
  # 这里选Vue
  ? Which framework does your project use? ...
    React
  > Vue.js
    None of these
  # 是否使用TypeScript，选Yes
  ? Does your project use TypeScript? » No / Yes
  # 选Browser
  ? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
  √ Browser
  √ Node
  # 配置文件格式，这里选JavaScript
  ? What format do you want your config file to be in? ...
  > JavaScript
    YAML
    JSON
  # 是否要安装相关支持，选yes no都可以，上面已经安装过了，这里选yes
  eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
  ? Would you like to install them now? » No / Yes
  # 安装方式, npm
  ? Which package manager do you want to use? ...
  > npm
    yarn
    pnpm
  # 回车，安装完成后，项目根目录下会生成一个 .eslintrc.cjs 的文件

  注意: 文件名为 .eslintrc.cjs ，有的后缀是 .cjs， 有的是 .js，以使用命令生成的文件为准

• 在根目录增加一个 prettier 的规则文件 .prettierrc.json

  内容参考Vue源码中的配置 https://github.com/vuejs/core/blob/main/.prettierrc

  {
    "semi": false, // 使用分号, 默认true
    "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "printWidth": 80,
    "trailingComma": "none",
    "arrowParens": "avoid"
  }

   如果用VSCODE，在增加完 .prettierrc.json 文件后重启一次ide，才能使这个配置生效

• 手动配置 .eslintrc.cjs 文件

  module.exports = {
    env: {
      browser: true,
      es2021: true,
      // 解决 'module' is not defined.eslintno-undef
      node: true
    },
    extends: [
      'eslint:recommended',
      'plugin:vue/vue3-essential',
      'plugin:@typescript-eslint/recommended',
      // 启用prettier插件与通用配置
      'plugin:prettier/recommended'
    ],
    overrides: [],
    // 解决 Parsing error: '>' expected.eslint
    parser: 'vue-eslint-parser',
    parserOptions: {
      // 解决 Parsing error: '>' expected.eslint
      parser: '@typescript-eslint/parser',
      ecmaVersion: 'latest',
      sourceType: 'module'
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
      // 在Eslint中开启prettier校验规则
      'prettier/prettier': 'error'
    }
  }

  到这里会发现只有 .ts 文件会校验

• 开启 .vue 文件的检验功能，修改 vite.config.ts

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  // 增加对vue文件检测 使Eslint的错误提示信息能在VSCode的控制台中出现
  import eslintPlugin from 'vite-plugin-eslint'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      vue(),
      eslintPlugin()
    ]
  })

  注意：修改后必须重启 VSCODE，才能生效

4. 其他配置

• package.json 配置

  {
    "script": {
      "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
      "prettier": "prettier --write ."
    }
  }

  npm run lnit

• 项目下新建 .prettierignore

  忽略格式化文件 (根据项目需要自行添加), 未验证

  node_modules
  dist

• prettier cli 指令

  # 这个功能未验证
  
  # 格式化路径下文件
  
  npx prettier -w .
  
  # 检查路径下文件是否格式化
  
  npx prettier -c .

   

5. 项目地址

https://github.com/lin557/vite-test