vscode保存自动格式化代码插件(vscode自动格式化配置)

设置vscode的格式化代码

1.在vscode中安装插件 Prettier - Code formatter

2.在设置中搜索pettier,找到Tab Width 更改为4

1.在设置中搜索 Code Actions On Save

2.点击setting.json配置文件加入以下配置

38、VS code必备前端插件

安装完成后,默认显示英文,我们可以通过安装中文语言包插件来显示中文,操作如下:

打开vscode,点击插件图标(或 + + X),在搜索框中输入“chinese”,安装

使用快捷键“ + + P”打开vscode的命令框,输入 display ,点击“Configure Display Language”,切换语言

如果不喜欢VS code本身的主题色,也可以更换默认主题,在命令框中输入 color theme ,回车,会进入主题列表,通过上下键切换主题,还不满足,没关系,点击安装其他颜色主题,在左侧会出现各式各样的主题插件,选择一个安装即可。

推荐一款图标插件 vscode-icons ,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。

自动闭合 HTML/XML 标签

自动重命名 HTML/XML 标签

解析CSS并自动添加前缀

用于着色匹配括号,让你的代码分层更清晰

运行代码片段或多种语言的代码文件

源代码拼写检查器,提示代码中单词拼写错误

允许查看css,并从HTML文件定位到css文件,文件定义跳转

支持.env文件语法,高亮显示

在VS code中绘制流程图,随时记录你的idea,不要太方便

代码格式校验工具,配合项目中的校验规则,实现保存时格式化代码,开发必备,你值得拥有!

配置文件,在setting.json中添加,可以参考一下

突出显示匹配的标签

当你引入时在左侧会显示图片的缩略图,方便预览

在编辑器中展示引用包的大小,让你更了解你引入的包

帮助你更快速的添加console和删除console,确实方便

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!

代码插件,在导入语句中自动完成NPM模块

允许你在默认浏览器或应用程序中打开当前文件。

自动识别文件路径,引用更方便

非常喜欢的一款代码格式化工具,在项目中也可以配置自己的规则

方便svg文件预览

快速搜索编辑器中添加的标签,如todo和fixme,并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。

突出显示尾随空格并快速删除它们!

你的代码很强大,释放它!

......

大家有什么好用的插件,也可以推荐一下哈~

vue VSCode 开发设置(html自动补全、eslint保存时格式化、vetur 格式化html)

File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

方法1:File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

Setting.json

方法2:File - Preference - 搜索框输入:files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存(默认)

afterDelay: 延迟xx时间后保存,可在 "files.autoSaveDelay" 中配置延迟时间;

onFocusChange: 编辑器失去焦点时自动保存;

onWindowChange: 窗口失去焦点时(编辑器窗口的切换,桌面窗口的切换)自动保存;

安装 ESLint

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File - Preference - User Snippers

vue.json文件,然后添加下面模板

然后新建.vue文件 ,写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话,我们还得设置一下,打开settings.json,添加下面的设置

如果你的Setting.json文件有 "files.associations" 设置的话,请删除,因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全,如果是要用.vue模板补全功能的话,html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier :规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意:以下配置是基于接下来介绍的插件设置的,如果没有安装插件是不会生效的。

或者:

其中:

4.如果使用了stylus,那么vscode安装stylus插件,进行设置,不适用冒号双引号大括号

根目录下创建eslint规则文件 .eslintrc.js

(下面browsers 多了s 正确的为 browser )

361知讯网

本文链接:http://pdidw.com/vs/20855.html

发表评论

评论列表

还没有评论,快来说点什么吧~