今天又重啟了一個項(xiàng)目是VUE3的牵舵，就搭配了vite柒啤，在使用vue-cli創(chuàng)建項(xiàng)目時，會有ESLINT選擇的畸颅，會自動給配置好担巩，vite創(chuàng)建項(xiàng)目很簡單，沒有ESLINT的配置没炒，要手動配置涛癌。跟著步驟來即可，很簡單
1送火、使用vite創(chuàng)建一個項(xiàng)目
npm create vite@latest
> Project name: 項(xiàng)目名稱
> Select a framework: 選擇框架 選擇vuejs
> Select a variant：選擇vue
Done. Now run:
cd 項(xiàng)目名稱
npm install
npm run dev
2拳话、安裝EsLint
npm i -D eslint
3、初始化配置EsLint
npx eslint --init
- 選擇模式： To check syntax, find problems, and enforce code style 嚴(yán)格模式
You can also run this command directly using '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.js
? Which framework does your project use? ...
React
> Vue.js
None of these
- 是否使用ts种吸，視自己情況而定弃衍，我這里不用 選擇的No
? Does your project use TypeScript? ? No / Yes
- 代碼在哪里運(yùn)行 使用空格鍵全選 瀏覽器+node
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
- 選擇一個風(fēng)格：選擇流行的即可
? How would you like to define a style for your project? ...
> Use a popular style guide
Answer questions about your style
- 你想遵循哪一種風(fēng)格指南? 選擇 Standard 我一直用的這個社區(qū)指南，感覺很好坚俗。認(rèn)可度也高
? Which style guide do you want to follow? ...
Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo
- 您希望您的配置文件是什么格式? 選擇js即可
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
- 可能會出現(xiàn)下面的提示镜盯，選擇yes即可
? The style guide "standard" requires eslint@^7.12.1. You are currently using eslint@8.10.0.
Do you want to downgrade? ? No / Yes
- 會問你是用npm安裝還是yarn安裝，視自己情況而定猖败，我這里選擇的npm(yes)
? Would you like to install them now with npm? ? No / Yes
4. 安裝完成后形耗，在項(xiàng)目根目錄會出現(xiàn).eslintrc.js文件
// .eslintrc.js 文件
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/essential',
'standard'
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
5. 繼續(xù)安裝vite-plugin-eslint
npm i -D vite-plugin-eslint
6. 在package.json文件中添加： "@babel/eslint-parser": "^7.17.0"（我忘了npm的安裝名了~）
// package.json 文件
"devDependencies": {
...
"@babel/eslint-parser": "^7.17.0"
}
7. 執(zhí)行npm install
npm install
8. 配置vite.config.js文件
// vite.config.js 文件
import eslintPlugin from 'vite-plugin-eslint'
export default defineConfig({
plugins: [
vue(),
// 添加下面這塊
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})
]
}
9. 配置.eslintrc.js文件
// .eslintrc.js 文件
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'standard',
// 新增這里vue3支持
'plugin:vue/vue3-recommended'
],
// 這是初始生成的 將其中的內(nèi)容更改為下面的
// parserOptions: {
// ecmaVersion: 'latest',
// sourceType: 'module'
// },
// 新的內(nèi)容
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
modules: true
},
requireConfigFile: false,
parser: '@babel/eslint-parser'
},
plugins: [
'vue'
],
rules: {
semi: [2, 'never'], // 禁止尾部使用分號“ ; ”
'no-var': 'error', // 禁止使用 var
indent: ['error', 2], // 縮進(jìn)2格
'no-mixed-spaces-and-tabs': 'error', // 不能空格與tab混用
quotes: [2, 'single'] // 使用單引號
'vue/html-closing-bracket-newline': 'off', // 不強(qiáng)制換行
'vue/singleline-html-element-content-newline': 'off', // 不強(qiáng)制換行
'vue/max-attributes-per-line': ['error', {
singleline: { max: 5 },
multiline: { max: 5 }
}] // vue template模板元素第一行最多5個屬性
// 其它的規(guī)則可以去eslint查看，根據(jù)自己需要進(jìn)行添加
}
}
按著步驟操作就可以把eslint配置完成辙浑，vscode與webstorm的eslint支持很好設(shè)置激涤，如果沒設(shè)置過的可以去搜一下，文章很多，就不在這里多說了倦踢。
