ESLint和Prettier的配置

2024-05-19 11:00:43

打开setting.json

首先，我们要点击左下角的设置，然后点击右上角的小图标，打开settings.json

创建.prettierrc

我们按下面的格式创建一个 .prettierrc 的文件，注意有点
格式 C:\Users\XXX\.prettierrc
在 .prettierrc文件里面添加下面的内容：
{
“semi”: false,
“singleQuote”: true,
“bracketSpacing”: true
}

配置settings.json

然后在settings.json中的添加如下配置，是添加哦，：

//XXX替换成自己电脑的路径
"prettier.configPath": "C:\\Users\\XXX\\.prettierrc",
// 安装Prettier配置
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {"prettier": {"trailingComma": "none","singleQuote": true,"semi": false,"arrowParens": "avoid","printWidth": 300},"js-beautify-html": {"wrap_attributes": false},},

设置默认格式化文档

选择配置默认格式化程序

选择Prettier
然后，ctrl+s保存就可以自动格式化代码啦

一些格式化错误

ctrl+s后出现多余的逗号，或者不能自动缩进的，可以按如下修改，我是这么解决的
先在创建过的 .prettierrc下添加"trailingComma":none
{
“semi”: false,
“singleQuote”: true,
“bracketSpacing”: true，
“trailingComma”:none
}
然后在settings.json中修改这个
“【vue】”: {
“editor.defaultFormatter”: “octref.vetur”
},

如果没用，尝试以下几种方法，
1.如果有，就禁用卸载JS-CSS-HTML这个插件并重新启动Vscode
2.清除settings.json的注释，并重新启动Vscode

其他创建项目的问题

如果创建项目出现Parsing error: No Babel config file detected for。。。，项目的一些文件左上角出现红线，添加这个requireConfigFile: false

ESLint和Prettier的配置相关推荐

eslint，prettier配置
ESlint与Prettier配置文章目录 ESlint与Prettier配置什么是eslint eslint配置什么是prettier 为什么要使用prettier? 安装prettier 解 ...
vscode的格式化工具：eslint 、 prettier、editorconfig 和 vetur
文章目录 eslint--代码检查工具 eslint的作用 eslint的配置第一步配置IDE的eslint环境第二步:配置项目中的eslint 下载对应的包 vite集成eslint Eslin ...
前端eslint+prettier+lint-staged配置
前端eslint+prettier+lint-staged配置文章目录前端eslint+prettier+lint-staged配置前提条件安装eslint开发环境安装prettier开发环 ...
在vscode里配置ESLint和Prettier
在vscode里配置ESLint和Prettier 文章目录在vscode里配置ESLint和Prettier vscode插件和npm包区别解决ESLint和Prettier冲突 vscode环 ...
React 创建项目流程+配置 eslint、 prettier 和 commitlint 规范工程
一. 利用create-react-app创建TS项目 React中文文档 :开始 – React npx create-react-app projectName --template typesc ...
Vue学习笔记7 - 在Vscode中配置Vetur，ESlint，Prettier
俗话说得好,工欲善其事必先利其器,想要熟练开发Vue项目,一个好的开发环境就是必不可少了,这里我就选用了vscode作为开发工具,毕竟vscode免费,还跨平台,应用范围也广,著名的vue开源项目:后 ...
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题一.问题痛点在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
eslint 保存自动格式化_代码规范之理解ESLint、Prettier、EditorConfig
授权转载自:nowThen https://juejin.cn/post/6895889063111294990 前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编 ...
vue项目接入eslint、prettier、husky+lint-staged
引言在vue-cli官方的脚手架创建项目时,会自动让选择Eslint+Prettier,如果是老项目想接入,那么按照下面步骤接入即可 eslint安装 npm i -D eslint eslint- ...
ESLint 和 Prettier 配合使用
CSDN 中文章不一定能及时更新,欢迎点击前往我的博客查看最新版本:许盛的博客 ESLint 是一款 Lint 工具,包含了代码质量检查等等. 而 Prettier 仅仅只是一个代码风格的约束工具,对 ...

最新文章

热门文章