vite2+vue3+standard eslint+sass

背景

最近已经有各类项目将vite+vue3投入生产开发了，vite最为一个脚手架很迷的居然没有继承vue/cli优秀丰富的配置，尤其默认不带eslint配置项其实对团队项目开发很不友好。google翻了好久又没找到很合适的配置，我的诉求很简单：

1. 像vue/cli时期一样提供save lint + vue/stanrd eslint标准
2. 不需要依赖IDE配置项（.vscode等）教研格式，也不需要全局eslint（很多教程都是全局eslint也是很迷。。。）,一切是项目级的
3. 支持sass

初始化项目

npm init vite@latest

✔ Project name: … my-project
✔ Select a framework: › vue
? Select a variant: › - Use arrow-keys. Return to submit.
❯   vue
    vue-ts

配置vue-router sass pug

npm i -S vue-router

npm i -D sass pug

vite中安装sass和pug就这么简单不需要安装和配置额外的loader!

安装sass+eslint

npm i -D sass eslint babel-eslint eslint-plugin-vue vite-plugin-eslint @vue/eslint-config-standard

最终package.json

{
  "name": "my-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.4.1",
    "pug": "^3.0.2",
    "sass": "^1.49.8",
    "vite": "^2.8.0",
    "vite-plugin-eslint": "^1.3.0"
  }
}

配置.eslintrc.js

项目根目录下新建文件.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': [
      'error',
      // we are only using this rule to check for unused arguments since TS
      // catches unused variables but not args.
      { varsIgnorePattern: '.*', args: 'none' }
    ]
  }
}

配置vue.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      cache: false
    })
  ]
})

save lint 依赖vite-plugin-eslint，记得关闭缓存，不然save lint不能及时校验到代码。

最终效果

打完收工！