eslint搭配prettier出现Replace `XXX` with `··········XXX·······`的问题解决方法

最新推荐文章于 2024-08-25 09:37:48 发布
最新推荐文章于 2024-08-25 09:37:48 发布
阅读量7.9k 收藏 1
点赞数
分类专栏： 前端 html 面试 文章标签： vscode 编辑器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55613022/article/details/123099800
版权

VScode Prettier 代码格式化 printWidth 配置冲突
关键词由CSDN通过智能技术生成
面试 同时被 3 个专栏收录
80 篇文章 3 订阅
订阅专栏
前端
52 篇文章 6 订阅
订阅专栏
html
52 篇文章 0 订阅
订阅专栏

出现原因

因为代码每行的字数过长，而prettier中建议的是80字符换行，跟VS code中的配置冲突导致，每次保存都会闪动一下。
在这里插入图片描述

解决办法

打开VS code的设置页面，搜索printWidth，将其全部修改为80，保存即可。

在这里插入图片描述

阿舒带你学编程
关注
专栏目录
记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架
小白小白从不日别的博客
06-02 418
在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。
eslint+prettier统一代码风格的实现方法
10-15
主要介绍了eslint+prettier 统一代码风格的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Delete `␍`eslintprettier/prettier亲测有效（含 Replace `············` with `······`报错）
weixin_46536395的博客
01-31 5032
Delete `␍`eslintprettier/prettier亲测有效（含 Replace `············` with `······`报错）
搭配使用 ESLint 和 Prettier 优化代码风格和质量
最新发布
上进！努力！！！
08-25 1280
ESLint：一个强大的 JavaScript 代码分析工具，主要用于发现代码中的问题和潜在错误。ESLint 通过定义和遵循一套规则，可以帮助开发者编写更高质量的代码。Prettier：一个“固执”的代码格式化工具，能够自动将代码格式化为一致的风格。Prettier 不会检查代码质量，而是专注于代码的外观，使代码更具可读性。
eslint-plugin-replace-interpol
05-02
eslint-plugin-replace 掉毛之前，请替换部分代码 安装 您首先需要安装 ： $ npm i eslint --save-dev 接下来，安装eslint-plugin-replace ： $ npm install eslint-plugin-replace --save-dev 注意：如果全局安装了ESLint（使用-g标志），则还必须全局安装eslint-plugin-replace 。 用法 将replace添加到.eslintrc配置文件的插件部分。 您可以省略eslint-plugin-前缀： { " plugins " : [ " replace " ] }
BUG记录：Replace `················` with `········`
weixin_75009770的博客
01-04 1680
BUG记录：Replace `················` with `········`
prettier格式化问题
hikankan的博客
03-24 707
解决replace...with↹↹ 问题，如何实现保存时自动格式化
Vue 编译错误 warning Delete `␍` prettier/prettier
oneyJiang
07-08 2669
解决 Vue 编译错误 warning Delete `␍` prettier/prettier
eslint搭配prettier出现Replace `XXX` with `⏎··········XXX⏎·······`的问题解决方法
热门推荐
松烟入墨
10-28 2万+
出现原因 因为代码每行的字数过长，而prettier中建议的是80字符换行，跟VS code中的配置冲突导致，每次保存都会闪动一下。 解决办法 打开VS code的设置页面，搜索printWidth，将其全部修改为80，保存即可。 ...
element-plus按全局引入解决element-plus的问题以后，又出现了新的问题。
weixin_40945354的博客
10-22 1986
Failed to compile with 1 error 下午12:00:14 error in ./src/main.js Syntax Error: Error: /user……/main.js: [babel-plugin-component] If you are using
手把手教你从0开始搭建一个vue项目（完结）
vv_bug
07-28 3058
前言 上一节webpack实战之（手把手教你从0开始搭建一个vue项目）最后我们完成了css样式的配置： webpack.config.js： const path = require("path"); const config = new (require("webpack-chain"))(); const isDev = process.env.WEBPACK_DEV_SERVER; config .context(path.resolve(__dirname, ".")) //webpack
ReactNative项目构建分析与思考之 cli-config
喻志强的博客
03-18 1130
前言 在上一篇 native_modules.gradle分析 文章中，我们对三方库是如何依赖到Android项目有了一个大致的了解。 在 native_modules.gradle 的 getReactNativeConfig 方法中，执行了一个node命令，然后得到了非常关键的 reactNativeConfigOutput后续的流程才能正常走下去。 String[] reactNativeConfigCommand = ["node", cliPath, "config"] def reactNa
uni-app多端开发
weixin_43993776的博客
11-08 1532
开场白： 要是在 vscode 书写代码， 需要添加 几个插件来支持 uni-app。
出现警告：warning Replace `‘xxx‘` with `“xxx“` prettier/prettier，关闭Prettier代码格式化工具
qq_46617584的博客
10-31 2991
warning Replace `'xxx'` with `"xxx"` prettier/prettier
出现警告：warning Replace `'xxx'` with `"xxx"` prettier/prettier，关闭Prettier代码格式化工具
weixin_43736435的博客
05-01 2万+
我们用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格，但这对新手使用有很大困难，严格的格式要求容易出现很多警告和错误，这时最好关闭Prettier。 在.eslintrc.js文件中配置关闭Prettier； 在rules中增加一行："prettier/prettier": "off" ...
武力解决Replace `····` with `↹↹`eslintprettier/prettier
weixin_73577920的博客
12-28 2547
武力解决Replace `····` with `↹↹`eslintprettier/prettier。
webstorm 中使用 Eslint+Prettier统一代码风格
fwzzzzz的博客
10-28 2108
nestjs
最新版eslint 搭配prettier应该如何配置
05-25
最新版的ESLint搭配Prettier需要进行以下配置： 1. 安装依赖： ``` npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev ``` 2. 创建配置文件`.eslintrc.js`： ```javascript module.exports = { parser: 'babel-eslint', parserOptions: { ecmaVersion: 2018, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, env: { browser: true, node: true, es6: true, }, extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error', }, }; ``` 3. 创建Prettier配置文件`.prettierrc.js`： ```javascript module.exports = { trailingComma: 'es5', tabWidth: 2, semi: true, singleQuote: true, }; ``` 4. 在VS Code中安装ESLint和Prettier插件，并在Settings中添加以下配置： ```json "editor.formatOnSave": true, "eslint.enable": true, "eslint.autoFixOnSave": true, "[javascript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, "[javascriptreact]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, "[typescript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, "[typescriptreact]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, ``` 完成以上配置后，ESLint和Prettier就可以愉快地一起工作了。同时，VS Code还会在保存文件时自动格式化代码。如果你想在终端中运行ESLint和Prettier，可以在package.json中添加以下命令： ```json "scripts": { "lint": "eslint .", "format": "prettier --write '**/*.{js,jsx,ts,tsx}'" } ``` 然后在终端中运行`npm run lint`和`npm run format`即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值