vscode 文件编码转换_VS code 常用配置

Emmet扩展JSX语法

在编辑器的左下角设置里找到设置-在左侧的扩展里找到Emmet,在右侧找到这个插件的Include Languages – 在settings.json中编辑

"emmet.includeLanguages":{

"javascript": "javascriptreact"

},

回到设置界面,右侧找到 Trigger Expansion On Tab 勾选

现在就可以在index.js的 render里面使用Tab键展开emmet缩写了

vscode设置2个空格的缩进

点击菜单栏中的文件–》首选项–》设置，然后搜索下图中的关键字，就可以设置了 搜索 tabsize也可以

设置换行方式：

用户设置- 查找

"editor.wordWrap": "off"

修改为on为自动换行

控制是否显示 minimap

"editor.minimap.enabled": true

设置为false为不显示

emmet更新图像大小快捷键设置

键盘快捷方式-搜索emmet 可修改emmet快捷键为 ctrl+u

查找替换相关快捷键：

查找 Ctrl+F

查找替换 Ctrl+H

整个文件夹中查找 Ctrl+Shift+F

插件： View InBrowser 安装

在浏览器上打开文件。

默认快捷键 ctrl+F1 可在快捷键中修改为自己习惯使用的键 ctrl+shift+alt+x

文件图标主题 seti-icons

安装后效果：

插件：cssrem px转rem的插件 默认根字体为16

可修改为： “cssrem.rootFontSize”: 20

Beautify( 格式化 javascript, JSON, CSS, Sass, and HTML )

存一个自己的配置(设置-首选项-设置)：

{

"window.zoomLevel": 0,

"workbench.activityBar.visible": true,

"git.ignoreLegacyWarning": true,

"editor.wordWrap": "on",

"editor.minimap.enabled": false,

"editor.fontSize": 18,

"workbench.iconTheme": "vscode-icons",

"workbench.colorTheme": "Monokai",

"cssrem.rootFontSize": 20,

"editor.multiCursorModifier": "ctrlCmd",

"editor.links": false,

"css.colorDecorators.enable": false,

"scss.colorDecorators.enable": false,

"css.validate": false,

"scss.validate": false

}

CSS压缩工具 ：默认快捷键 shift+alt+f

Markdown插件： Markdown Preview Enhanced

VS Code在一个单独的JS文件中使用jQuery智能提示 ：

在你的项目根目录添加一个 jsconfig.json 文件。内容为：

{

"typeAcquisition": {

"include": [

"jquery"

]

}

}

Vetur：VSCode下强大的Vue开发工具

打开文件中有中文注释时乱码解决方案：

文件-首选项-搜索

"files.autoGuessEncoding": flase

改为

"files.autoGuessEncoding": true

vs code自带对比代码差异功能

在vscdoe的文件列表下选中待比较文件1，右键-选择以进行比较。

然后选中第二文件，右键-与已选择文件比较

小程序助手 ：可以高亮显示小程序扩展名 wxss wxml

小程序开发助手：微信小程序开发助手，代码提示+ 语法高亮

支持 js，json，wxml 文件的代码提示

wxml 文件语法高亮

vscode wxml :为 VSCode 提供 wxml 语法支持及代码片段

Live Server (浏览器实时预览插件)

安装好之后，在左边工程文件鼠标右键 Open with Live Server 即可自动打开浏览器。

再编辑文件之后保存，会实时同步到浏览器。

可以通过编辑器右下角图标开启和关闭

Live Sass Compiler(实时sass编译为css)

安装Live Sass Compiler之后会自动安装 Live Server。依赖于Live Server

JS & CSS Minifier (JS和CSS压缩插件)

安装之后会在编辑器左下角的状态栏出现Minify文字提示

Css Peek (能在源代码中的字符串中找到对应的css(类和ID)。显示在那个css文件里，还有在第几行。)

在JS中启用emmet

VSCode setting.json 设置：

// 启用使用默认不支持的语言的 Emmet 缩写。在此添加该语言与支持 Emmet 的语言之间的映射。示例: {"vue-html": "html", "javascript": "javascriptreact"}

"emmet.includeLanguages":{

"javascript":"html"

}

保存时自动将SASS/SCSS 文件编译成.css和.min.css

格式化代码; 安装成功后默认鼠标右键时菜单格式化文档

代码片断新建vue组件代码片断

文件-首选项-用户片断 在弹出的输入框内输入vue.json回车

在打开的配置文件vue.json文件中输入如下代码：

{

"vue": {

"prefix": "vue", // 触发的关键字 输入vue按下tab键

"body": [

"",

"",

"",

"",

"

"export default {",

"data() {",

"return {",

"",

"};",

"}",

"}",

"",

"",

"

"",

"",

],

"description": "vue components"

}

}

使用时在*.vue后缀的文件中输入vue再按Tab即可