Vite2+Vue3+ts的eslint設定踩坑

大禹不治水發表於2022-04-18
ViteVueEsLint

目錄

新專案了

渾渾噩噩一個五年前的vue2的專案維護了一年多，要開始重構了。前端還是vue2，要加個後臺系統來管理配置化功能。後臺管理就撿起vue3吧，好久沒寫了，看看有啥新東西玩，有空了再更新一下部落格。

Vite搭建

之前寫了個用vue-cli來搭建的（vue-cli腳手架搭建vue3.0+typescripe專案），還是Vue3剛出來那會踩的坑，現在vite逐漸成熟，效能、速度也比webpack要好，也來踩踩的。
Vite官網已經寫的很詳細了，不贅述，無坑。
yarn create vite vue-app --template vue-ts

eslint

先安裝eslint

yarn add -D eslint

建立.eslintrc.js

先來點基本配置

  module.exports = {
    root: true,
    env: {
  	node: true,
  	browser: true,
  	es2021: true,
    },
    parserOptions: {
  	ecmaVersion: 12,
    },
  }

引入規則

我這裡就用幾個官方規範吧，下面總是要自己配置一堆的，也可以用其他的優秀開源規範（Airbnb）
yarn add -D eslint-plugin-vue
.eslintrc中extends新增'plugin:vue/vue3-recommended'

Airbnb

如果要用Airbnb，需要安裝eslint-config-airbnb-base和eslint-plugin-import

yarn add -D eslint-config-airbnb-base eslint-plugin-import

.eslintrc中extends新增'airbnb-base'

配合prettier

yarn add -D eslint-plugin-prettier eslint-config-prettier
yarn add -D -E prettier

.eslintrc差不多就寫成這樣

  ……
  extends: [
  	'plugin:vue/vue3-recommended',
  	'eslint:recommended',
  	'plugin:prettier/recommended'
  ],
  plugins: [ 'prettier'],
  rules: {
  	'prettier/prettier': 0,
  }
  ……

對ts的支援

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc中新增配置

plugins: ['@typescript-eslint'],
parserOptions: {
  parser: '@typescript-eslint/parser'
}

.eslintrc.js

至此，eslint配置完成，可以正常使用，上程式碼

  module.exports = {
    root: true,
    env: {
  	node: true,
  	es2021: true,
  	browser: true
    },
    extends: [
  	'plugin:vue/vue3-recommended',
  	'eslint:recommended',
  	'plugin:prettier/recommended'
    ],
    plugins: ['@typescript-eslint', 'prettier'],
    parserOptions: {
  	parser: '@typescript-eslint/parser',
  	ecmaVersion: 12
    },
    rules: {
  	'prettier/prettier': 0,
  	……
    }
  }

在頁面上檢視eslint報錯

強逼迫福音，經常有時候沒注意看命令列，報錯就一直留下來，提交程式碼也會被攔住。新增vite-plugin-eslint外掛即可
在vite.config.ts中配置

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

  export default defineConfig({
    plugins: [
  	vue(),
  	eslintPlugin({
  	  exclude: ['./node_modules/**'],
  	  cache: false
  	})
    ]
  })

記筆記！cache這個屬性一定要帶上false，否則修復的問題還是會不停報出來錯，有毒。

使用setup sugar的坑

<script setup>支援不return直接用，使用eslint舊版會報錯
'xxx' is assigned a value but never used.
在.eslintrc配置'no-unused-vars': [0]可解決
我試了新版本沒有這個問題，在template裡面使用變數就不會標紅報錯

相關文章