Vite创建Vue3项目(一)——配置Vite4+Vue3+Eslint+Prettier

把西红柿变成番茄_o
1,328 阅读4分钟

1.使用 vite-cli 命令 搭建 Vite 项目

使用 NPM:
npm create vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite

官方提供3种方式，我选择的使用npm

PS E:\demo> npm create vite@latest  //npm create vite@latest
npx: installed 1 in 5.239s
√ Project name: ... study-demo // 输入项目名称study-demo
√ Select a framework: » Vue // 选择项目框架vue
√ Select a variant: » TypeScript // 是否需要使用 TypeScript

Scaffolding project in E:\demo\study-demo...

Done. Now run:

  cd study-demo // 进入目录
  npm install // 安装依赖
  npm run dev // 运行项目

继续↓ 配置ESlint+Prettier确保代码规范

2.配置ESlint

//安装EsLint
npm install eslint -D

//初始化配置EsLint
npx eslint --init
      //你想如何使用ESLint?       
    ? 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 //检查语法、发现问题和加强代码风格   
      
      //选择语言模块
      ? What type of modules does your project use? ... 
    > JavaScript modules (import/export)              
      CommonJS (require/exports)                      
      None of these 
      
      //选择语言框架
    ? Which framework does your project use? ...       
      React                                            
    > Vue.js                                           
      None of these  
      
      //是否使用TypeScript 视自己情况选择 我选择Yes
    ? Does your project use TypeScript? » No / Yes
    
      //代码在哪里运行 使用空格键全选 浏览器+node
    ? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
    √ Browser                                                                                  
    √ Node 
    
      //您希望您的配置文件是什么格式
    ? What format do you want your config file to be in? ... 
    > JavaScript                                             
      YAML                                                   
      JSON
      
      //您所选择的配置需要以下依赖项,是否立即安装 选择Yes
    The config that you are selected requires the following dependencies:
    eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescripteslint/parser@latest
    ? Would you like to install them now? » No / Yes
    
      //您想使用哪个包管理器?视自己情况而定
    ? Which package manager do you want to use? ...
    > npm
      yarn
      pnpm

//安装完成后，在项目根目录会出现.eslintrc.js文件
module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

项目下新建 .eslintignore, 并添加内容

# eslint 忽略检查 (根据项目需要自行添加) 
/node_modules
/dist
/public
.vscode
.idea

在package.json 增加 script:

{ 
    "scripts": { 
        "eslint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix" 
    } 
}

执行 npm run eslint 命令，提示报错： image.png

要修改 .eslintrc.cjs 文件的 parser 配置，使用 vue-eslint-parser 才能识别 vue 文件！

"parser": "vue-eslint-parser",  //@typescript-eslint/parser改成vue-eslint-parser
"parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser":"@typescript-eslint/parser" // 新增"parser":"@typescript-eslint/parser"
},

两个parser的区别在于，外面的parser用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而parserOptions中的parser，即@typescript-eslint/parser用来解析vue文件中<script>标签中的代码。

3.配置Prettier

npm install prettier -D

在项目根目录新建.prettierrc.cjs

module.exports = {
    // 一行最多 120 字符
    printWidth: 100,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用 tab 缩进，而使用空格
    useTabs: false,
    // 行尾不需要有分号
    semi: false,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // 禁止使用尾逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // 箭头函数，函数体一个参数的时候禁止使用括号
    arrowParens: 'avoid'
}

在package.json 增加 script:

{ 
    "scripts": { 
        "format": "prettier --write ./**/*.{html,vue,ts,cjs,json,md}"
    } 
}

解决 eslint 和 prettier 的冲突：

npm install eslint-config-prettier -D // eslint兼容的插件,关闭所有不必要或可能跟prettier产生冲突的规则
npm install eslint-plugin-prettier -D // eslint的prettier,可以让eslint使用prettier规则进行检查

在 .eslintrc.json中extends的最后添加一个配置

{ 
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended" // 最后一行添加"plugin:prettier/recommended"
    ],
}

4.安装 vite-plugin-eslint

// 说明: 该包是用于配置vite运行的时候自动检测eslint规范 不符合页面会报错
npm install vite-plugin-eslint -D

配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint' //导入包
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 增加下面的配置项,这样在运行时就能检查eslint规范
    eslintPlugin({
      include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue']
    })
  ]
})

5.WebStorm配置保存时代码自动格式化

根据以下设置编辑器在保存时自动格式化代码

image.png

image.png

6.Vscode配置保存时代码自动格式化

我们先需要为vscode安装ESLint、Prettier - Code formatter、Prettier ESLint插件

image.png

在项目的根目录创建.vscode文件夹， 然后再在其下面创建settings.json文件

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  //针对共用的语言如JS、TS和JSX关闭文件保存自动格式化功能，通过eslint来做这件事
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    //告诉ESLint插件在保存时运行
    "source.fixAll.eslint": true
  }
}

Vscode自动格式化参考：juejin.cn/post/715689…

avatar
文章
阅读
粉丝