今天又重启了一个项目是VUE3的，就搭配了vite，在使用vue-cli创建项目时，会有ESLINT选择的，会自动给配置好，vite创建项目很简单，没有ESLINT的配置，要手动配置。跟着步骤来即可，很简单
1、使用vite创建一个项目
npm create vite@latest
> Project name: 项目名称
> Select a framework: 选择框架 选择vuejs
> Select a variant：选择vue
Done. Now run:
cd 项目名称
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 严格模式
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
- 代码在哪里运行 使用空格键全选 浏览器+node
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
- 选择一个风格：选择流行的即可
? How would you like to define a style for your project? ...
> Use a popular style guide
Answer questions about your style
- 你想遵循哪一种风格指南? 选择 Standard 我一直用的这个社区指南，感觉很好。认可度也高
? 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
- 可能会出现下面的提示，选择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. 安装完成后，在项目根目录会出现.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. 继续安装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. 执行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'
],
// 这是初始生成的 将其中的内容更改为下面的
// parserOptions: {
// ecmaVersion: 'latest',
// sourceType: 'module'
// },
// 新的内容
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], // 缩进2格
'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
quotes: [2, 'single'] // 使用单引号
'vue/html-closing-bracket-newline': 'off', // 不强制换行
'vue/singleline-html-element-content-newline': 'off', // 不强制换行
'vue/max-attributes-per-line': ['error', {
singleline: { max: 5 },
multiline: { max: 5 }
}] // vue template模板元素第一行最多5个属性
// 其它的规则可以去eslint查看，根据自己需要进行添加
}
}
按着步骤操作就可以把eslint配置完成，vscode与webstorm的eslint支持很好设置，如果没设置过的可以去搜一下，文章很多，就不在这里多说了。
网友评论