vscode vue3 eslint prettier
时间: 2025-01-17 10:10:56 AIGC 浏览: 69
### 设置 Vue3 项目与 ESLint 和 Prettier 的集成
#### 安装依赖包
为了使 ESLint 和 Prettier 能够正常工作于 Vue3 项目中,需先通过 npm 或 yarn 安装必要的开发工具。命令如下:
```bash
npm install eslint prettier eslint-plugin-vue @vue/eslint-config-prettier --save-dev
```
或者使用 Yarn:
```bash
yarn add eslint prettier eslint-plugin-vue @vue/eslint-config-prettier -D
```
这一步骤确保了环境中有最新的 ESLint、Prettier 及其针对 Vue 组件的支持。
#### 创建配置文件
接下来要创建或更新几个重要的配置文件来定义编码标准和行为准则。
对于 `.eslintrc.js` 文件,应包含以下内容以应用推荐的规则集并启用 Prettier 插件[^4]:
```javascript
module.exports = {
root: true,
env: {
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-strongly-recommended',
'@vue/prettier'
],
parserOptions: {
ecmaVersion: 2020
}
};
```
关于 `.prettierrc.json` 文件,则可以自定义一些格式化选项,尽管有时这些设置可能不会立即生效,但这并不妨碍后续操作[^3]:
```json
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
```
另外还需要建立一个 `.prettierignore` 文件用于指定哪些路径下的文件不需要被 Prettier 处理[^2]:
```
node_modules/
dist/
build/
mock/
public/
*.sh
*.md
*.scss
*.woff
*.ttf
.vscode/
.idea/
```
最后,在 `package.json` 中加入脚本以便轻松运行 linter 和 formatter:
```json
"scripts": {
"lint": "vue-cli-service lint",
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
"format": "prettier --write ."
},
```
#### Visual Studio Code 配置
为了让 VSCode 自动执行上述工具的功能,可在项目根目录下创建名为 `.vscode/settings.json` 的文件,并填入下列 JSON 对象以激活保存时自动格式化功能以及指明默认使用的 Formatter 是 Prettier[^1]:
```json
{
"cssrem.rootFontSize": 37.5,
"window.zoomLevel": 1,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}
```
完成以上步骤之后,每当编辑器检测到文件发生变化就会调用相应的工具来进行语法检查和美化处理,从而保持整个代码库的一致性和可读性。
阅读全文
相关推荐


















