一、Prettier - Code formatter 文件配置

settings.json文件

参考文章@前端烂笔头

参考文章@m0_57617148

关闭eslint语法报错:

参考文章@钢镚儿吖

建议:

首先采用文章一的文件配置

二、关闭保存自动格式化功能

在 settings 文件中将如下属性设置为 false

 "editor.formatOnSave": false, // #每次保存的时候自动格式化

相关配置

再 settings.json 文件中配置如下代码

{"editor.fontFamily": "Fira Code, Consolas", //调整字体，Fira Code"editor.detectIndentation": false,// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.tabSize": 4, // 重新设定tabsize"editor.formatOnSave": true, // #每次保存的时候自动格式化"editor.formatOnPaste": true,"editor.formatOnType": false,"editor.suggestSelection": "first","editor.autoIndent": false,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.enable": false,"eslint.run": "onType",// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact","vue-html","html","vue"],"eslint.options": {"extensions": [".js",".vue"]},"files.associations": {"*.vue": "vue","*.js": "javascript","*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript",// "*.wpy": "vue"},// #去掉代码结尾的分号"prettier.semi": false,// #使用带引号替代双引号"prettier.singleQuote": true,// #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// #让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.js": "vscode-typescript","git.ignoreMissingGitWarning": true,"git.confirmSync": false,"git.autofetch": true,"git.enableSmartCommit": true,"files.autoSave": "onWindowChange","explorer.confirmDelete": false,"terminal.integrated.rendererType": "dom","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"// #vue组件中html代码格式化样式}},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"extensions.autoUpdate": true,
"window.zoomLevel": 2,
"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"
},}

然后再项目 ‘根目录’ 创建一个.prettierrc文件,如下图所示;

双引号保存为 ‘单引号’,配置;

关闭 eslint 自带语法报错功能;

在 settings.json 文件下搜索 eslint.enable ,关闭；如下图所示。

三、VSCode中vue拓展vetur整理代码时的尖括号换行问题

参考文章@Nosaj
参考文章@一捆铁树枝
效果图:

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typ=script",
"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"},"prettyhtml": {"printWidth": 100,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}},// 第二种"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_line_length": 120,"wrap_attributes": "auto","end_with_newline": false}}

四、粘贴时自动格式化

解决办法：

editor.formatOnPaste设置为false

参考文章@weixin_34247299

五、vue 文件点击方法名跳转

在项目中根目录下创建一个 jsconfig.json 文件

在 jsconfig.json 配置如下代码

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules", "dist"]
}

vscode 中关闭 eslint 报警问题（vue 项目）

在当前项目中添加vue.config.js,添加代码如下
参考文章@wangsk69

module.exports = {lintOnSave:false  // 修改成false 就是不检查了
}

VSCode中的Prettier - Code formatter插件配置相关推荐

vue .prettierrc文件常见配置，以及配置 Prettier - Code formatter 插件格式化
使用vcode下载安装 Prettier - Code formatter(要启用该插件) 然后还要设置 vcode 编辑器的默认格式化为 Prettierxxx , 操作步骤: 在vcode ...
Vs Code中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置
文章目录一.插件的介绍与安装 1.Vetur插件 2.ESLint 插件 3.Prettier - Code formatter插件二.相关文件配置总结前面主要先对插件进行介绍和如何安装,之后 ...
VScode中过时的几个插件，赶快卸载吧！VScode实用设置，快来开启！及Copilot的开启！
⭐ 简介:大家好,我是zy阿二,我是一名对知识充满渴望的自由职业者. ☘️ 最近我沉溺于Python的学习中.你所看到的是我的学习笔记. ❤️ 如果对你有帮助,请关注.点赞,让我们共同进步.有不足之处 ...
Visual Studio Code Go插件配置选项
Visual Studio Code Go插件配置选项 go get命令和go install命令的区别 go get 命令的作用从远程下载需要用到的包下载完之后,执行go install go ...
vscode中写markdown格式笔记的配置过程和相关语法
vscode中写markdown格式笔记的配置过程和相关语法一.引言二.安装相关插件三.开始使用vscode进行编写四.相关语法参考链接: link link 一.引言以前使用 Typor ...
IDEA从零到精通（27）之Eclipse Code Formatter插件的安装与使用
文章目录作者简介引言导航概述安装插件格式配置插件的使用小结导航热门专栏推荐作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScri ...
java code formatter_IDEA插件配置之Eclipse Code Formatter
Eclipse.Intellij idea格式化结果不一样,导致长时间都是用两个开发工具,idea开发eclipse进行格式化.但是现在这个问题可以解决了.使用Eclipse Code Formatt ...
值得收藏！VScode 中这 15 个神仙插件写代码必备！
Visual Studio Code 是一款轻量级但功能强大的源代码编辑器,适用于 Windows.macOS 和 Linux.内置了对 JavaScript.TypeScript 和 Node.js ...
前端代码规范速成 prettier - code formatter
在vscode编译器中搜索并安装prettier - code 安装完成后在项目的根目录会多一个.prettierrc.js文件, 在这个文件里面可以配置代码规则,如果你新建了一项目,没有这个文件,可 ...

VSCode中的Prettier - Code formatter插件配置

一、Prettier - Code formatter 文件配置

二、关闭保存自动格式化功能

相关配置

三、VSCode中vue拓展vetur整理代码时的尖括号换行问题

四、粘贴时自动格式化

五、vue 文件点击方法名跳转

vscode 中关闭 eslint 报警问题（vue 项目）

VSCode中的Prettier - Code formatter插件配置相关推荐

最新文章

热门文章