vscode配置vue项目：手把手配置VSCode使用ESLint
vscode配置vue项目：手把手配置VSCode使用ESLint4.3、选择语言框架? What type of modules does your project use? ... > JavaScript modules (import/export) CommonJS (require/exports) None of these这里笔者选择的是JavaScript modules (import/export)。? Select a variant: » - Use arrow-keys. Return to submit. > JavaScript TypeScript Customize with create-vue Nuxt2、进入项目目录$ cd 02-my-app3、安装 ESLint$ yarn add -D eslint4、初始化 ESLint 配置$ npm init @esli
VSCode版本：VSCode 1.71.2
1、创建项目$ yarn create vite
1.1、输入项目名称：02-my-app
√ Project name: ... 02-my-app
1.2、选择框架：vue
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
1.3、选择项目类型：JavaScript。
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
Customize with create-vue
Nuxt2、进入项目目录
$ cd 02-my-app3、安装 ESLint
$ yarn add -D eslint4、初始化 ESLint 配置
$ npm init @eslint/config
4.1、选择模式
? 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
这里笔者选择的是To check syntax and find problems。
4.2、选择语言模块
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
这里笔者选择的是JavaScript modules (import/export)。
4.3、选择语言框架
? Which framework does your project use? ...
React
> Vue.js
None of these
这里笔者选择的是Vue.js。
4.4、选择是否使用 TypeScript
Does your project use TypeScript? » No / Yes
这里笔者选择的是No。
4.5、选择代码在哪里运行
? Where does your code run? ... (Press <space> to select <a> to toggle all <i> to invert selection)
√ Browser
√ Node
这里Browser和Node两个都要选中，ESLint 会报'module' is not defined的错误。
4.6、选择ESLint配置文件的格式
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
这里笔者选择的是JavaScript。
4.7、选择是否安装eslint-plugin-vue@latest
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest
? Would you like to install them now? » No / Yes
这里笔者选择的是Yes。
4.8、选择使用哪个软件包管理器
? Which package manager do you want to use? ...
npm
> yarn
pnpm
这里笔者选择的是yarn。
执行成功后会在项目根目录下创建一个eslintrc.cjs文件。
eslintrc.cjs文件内容：
module.exports = {
"env": {
"browser": true
"es2021": true
"node": true
}
"extends": [
"eslint:recommended"
"plugin:vue/vue3-essential"
]
"overrides": [
]
"parserOptions": {
"ecmaVersion": "latest"
"sourceType": "module"
}
"plugins": [
"vue"
]
"rules": {
}
}5、安装Prettier
$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
5.1、创建.prettierrc文件并修改其内容。
$ touch .prettierrc
.prettierrc文件内容：
{
"bracketSpacing": true
"printWidth": 120
"proseWrap": "always"
"semi": false
"singleQuote": true
"trailingComma": "none"
}
修改.prettierrc文件内容后需要重新启动下VSCode。
这里只是简单列举了几个配置属性，如果需要配置其它属性可以根据需要自行配置。
6、修改eslintrc.cjs文件。主要修改了如下两个地方。
完整的eslintrc.cjs文件内容：
module.exports = {
env: {
browser: true
es2021: true
node: true
}
extends: [
'eslint:recommended'
'plugin:vue/vue3-recommended'
'plugin:prettier/recommended'
]
overrides: []
parserOptions: {
ecmaVersion: 'latest'
sourceType: 'module'
}
plugins: ['vue' 'prettier']
rules: {}
}7、附录
7.1、package.json文件内容：
{
"name": "02-my-app"
"private": true
"version": "0.0.0"
"type": "module"
"scripts": {
"dev": "vite"
"build": "vite build"
"preview": "vite preview"
}
"dependencies": {
"vue": "^3.2.37"
}
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0"
"eslint": "^8.23.1"
"eslint-config-prettier": "^8.5.0"
"eslint-plugin-prettier": "^4.2.1"
"eslint-plugin-vue": "^9.5.1"
"prettier": "^2.7.1"
"vite": "^3.1.0"
}
}
7.2、下面是笔者 VSCode 的配置信息：
{
"update.enableWindowsBackgroundUpdates": false
"workbench.iconTheme": "material-icon-theme"
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
// 每次保存的时候自动格式化
"editor.formatOnSave": true
"editor.defaultFormatter": "esbenp.prettier-vscode"
"eslint.format.enable": true
"eslint.alwaysShowStatus": true
"eslint.validate": [
"javascript"
"javascriptreact"
"vue"
"typescript"
"typescriptreact"
]
}
