1. 環(huán)境和工具

開發(fā)工具: vs code
node: 20.10.0
npm: 10.2.3
UI框架： Element-plus

gitee地址：

2. 項目初始化

搭建一個新的vite項目

// 執(zhí)行
npm create vite@latest

回車后選擇 vue 和 Typescript
? Select a framework: ? Vue
? Select a variant: ? TypeScript

搭建完成執(zhí)行命令后如圖所示

安裝完后項目目錄為

3. 安裝插件

1. 安裝ESLint

1.1 安裝插件

// 安裝eslint
npm i eslint -D

1.2 初始化ESLint

vite-admin % npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? · problems
? What type of modules does your project use? · esm
? Which framework does your project use? · vue
? Does your project use TypeScript? · No / Yes
? Where does your code run? · browser, node
? What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? · No / Yes
? Which package manager do you want to use? · npm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

added 34 packages, and audited 185 packages in 9s

40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.cjs file in /Library/vite-admin

安裝后生成 .eslintrc.cjs 文件， 配置如下：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

2. 安裝Prettier

2.1 安裝插件

npm install prettier -D

2.2 配置Prettier

根目錄下創(chuàng)建.prettierrc.cjs文件
.prettierrc.cjs 配置如下：

// prettier的默認配置文件
module.exports = {
  // 一行最多 150 字符
  printWidth: 150,
  // 使用 2 個空格縮進
  tabWidth: 2,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 不尾隨分號
  semi: true,
  // 使用單引號
  singleQuote: true,
  // 多行逗號分割的語法中，最后一行不加逗號
  trailingComma: 'none',
  // 單個參數的箭頭函數不加括號 x => x
  arrowParens: 'avoid',
  // 對象大括號內兩邊是否加空格 { a:0 }
  bracketSpacing: true,
  //結束行形式
  endOfLine: 'lf',
  //不對vue中的script及style標簽縮進
  vueIndentScriptAndStyle: false
};

3. vscode 安裝插件及配置

3.1 安裝插件 ESLint 和 Prettier - Code formatter

• ESLint：語法檢測
• Prettier - Code formatter： 代碼格式化

安裝后在 首選項 -> 設置 中配置 setting.json文件

打開后配置如下

{
  "security.workspace.trust.untrustedFiles": "open",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  // vscode默認啟用了根據文件類型自動設置tabsize的選項
  "editor.detectIndentation": false,
  // 重新設定tabsize
  "editor.tabSize": 2,
  // 每次保存的時候自動格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // 把prettier設置為vscode默認的代碼格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vue文件的默認格式化工具選擇prettier
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.settings.applyToAllProfiles": [],
  "git.autofetch": true
}

3.2 解決ESLint與Prettier的沖突

因為ESLint和Prettier都可以進行代碼格式化，在setttings.json文件中同時開啟了ESLint和Prettier進行代碼格式化，所以兩者重疊的格式化規(guī)則不一致時就導致了格式化代碼時出現(xiàn)沖突的問題。

解決沖突：
安裝 eslint-config-prettier 和 eslint-plugin-prettier 依賴：

npm install eslint-config-prettier eslint-plugin-prettier -D

安裝后，在 .eslintrc.cjs 中 extends的最后添加一個配置:

 extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential',
    "plugin:prettier/recommended" // 解決ESlint和Prettier沖突
  ],

3.3 保存文件時自動格式化代碼

在設置中搜索 Format on save, 勾選即可

3.4 忽略不想被檢測和格式化的文件

• 忽略不參與eslint檢測的文件，可以創(chuàng)建一個 .eslintignore ， 配置內容跟 git忽略文件一樣
• 忽略不被格式化的文件，可以創(chuàng)建一個 .prettierignore， 配置內容跟 git忽略文件一樣

比如不想檢測和格式化 vite.config.ts
.eslintignore 文件

vite.config.ts

.prettierignore 文件

vite.config.ts

這樣，保存和修改文件的時候不會被檢測和格式化文件

3.5 控制臺輸出打印ESLint報錯

1、安裝插件 vite-plugin-eslint

npm install vite-plugin-eslint -D

2、vite.config.ts文件中配置 vite-plugin-eslint插件

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(),
    eslintPlugin({
      include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.vue', 'src/*.ts', 'src/*.js', 'src/*.vue']
    })
  ]
})

項目運行刷新后就可以自動檢測規(guī)范報錯了

3.5 ESLint語法檢測示例

4. 代碼倉庫

gitee : https://gitee.com/hanks_s/vite-admin.git 有用給個star文章來源地址http://www.zghlxwxcb.cn/news/detail-786757.html

到了這里，關于vite-admin框架搭建，ESLint + Prettier 語法檢測和代碼格式化的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！