vue3 ts配置eslint,prettier
时间: 2025-05-29 11:34:29 浏览: 41
Vue 3 和 TypeScript 的项目中配置 ESLint 和 Prettier 可以帮助我们保持代码风格的一致性和规范性。以下是详细的步骤:
### 步骤一:安装依赖
首先需要安装相关的依赖包。
```bash
npm install eslint prettier eslint-plugin-vue @vue/eslint-config-typescript --save-dev
```
如果你还需要支持其他规则,比如 Vue 规则等,可以额外添加 `eslint-plugin-prettier`、`eslint-config-prettier` 等插件。
```bash
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
```
### 步骤二:初始化 ESLint 配置文件
运行以下命令生成 `.eslintrc.js` 文件,并选择适合项目的选项(如语言类型、框架支持等)。
```bash
npx eslint --init
```
也可以手动创建 `.eslintrc.js` 文件并填写如下内容作为示例:
```javascript
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
// 根据需求自定义规则
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
}
};
```
### 步骤三:设置 Prettier 配置
通常我们会使用一个独立的 `.prettierrc.json` 或者直接在 `package.json` 中配置 Prettier 设置。
`.prettierrc.json`
```json
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none"
}
```
如果想将它集成到 ESLint 当中,则可以在 `.eslintrc.js` 添加对应的插件和覆盖规则。
### 步骤四:VSCode 插件推荐及设置
为了更好地配合 VS Code 使用,建议下载以下几个插件:
- **ESLint**
- **Prettier - Code formatter**
然后打开用户设置 JSON (Preferences -> Settings),加入自动保存格式化功能。
```json
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
```
完成以上步骤之后,在日常编码过程中就可以享受到由 ESlint 提供的质量保障以及通过 Prettier 实现的标准样式统一了!
阅读全文
相关推荐




















