您现在的位置是：网站首页> 编程资料编程资料

vscode 配置eslint和prettier正确方法_其它综合_

2023-05-27 555人已围观

简介 vscode 配置eslint和prettier正确方法_其它综合_

ESlint

ESLint 是一款语法检测工具。因为 JavaScript 本身是一门灵活的动态语言，一千个 JavaScriptor 就有一千种写法。为了方便人们的理解，快速上手别人的代码。

说明

在开发项目的时候，往往会通过eslint来检查代码格式，而prettier用来进行代码的格式化。本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置。

vscode 安装插件

首先，需要在vscode上安装eslint和prettier的插件。

在这里插入图片描述

项目中的配置文件

在vue项目中，.eslintrc.js文件主要负责eslint的相关配置。

在这里插入图片描述

 module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], parserOptions: { parser: "babel-eslint", }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", quotes: ['error', 'single', { allowTemplateLiterals: true }], // 单引号 允许使用反引号 semi: ['error', 'never'], // 禁止末尾使用分号 }, };

关于更多的eslint规则，可以点击这里查看。

.prettierrc.js文件负责prettier的规则设置：

在这里插入图片描述

 module.exports = { tabWidth: 2, // tab semi: false, // 结尾不用分号 singleQuote: true, // 使用单引号 bracketSpacing: true, // 对象属性前后加空格 disableLanguages: ['vue'], // 不格式化vue文件 }