2 snippets vue 修改配置_VSCode自己常用的快捷键、插件、主题和配置相关记录

一、常用快捷键和设置

1、打开和关闭集成终端

win: crtl+`

mac: control+`

2、查看运行的插件

可以通过打开命令面板(Ctrl + Shift + P)，并输入Show running extensions来查看所有你安装的正在运行的插件。

3、快速复制行

光标放在行头，ctrl+shift+d  可以快速复制行，跟sublime一样。

4、光标移至文件的开头和结尾

要使光标移到文件的第一行或最后一行，最快的方法是按Ctrl + Home (mac: command + Home)键至开头，Ctrl + End (mac: command + End)键至结尾。

5、向上和向下移动一行

按Alt + 向上箭头(mac: option+ 向上箭头)当前行向上移动，按Alt + 向下箭头(mac: option+ 向下箭头)当前行向下移动。

6、打开文件的选项卡向左和向右移动

可以按Ctrl+Shift+PgUp/PgDn  (command + Shift+PgUp/PgDown)向左/向右移动

7、复制光标

按Ctrl + Alt +向上箭头(mac: command + Option +向上箭头)将光标添加到上面，

按Ctrl + Alt +向下箭头(mac: command + Option + 向下箭头)将光标添加到下面。

也可以通过crtl+d复制。

8、插入行

上方插入一行 ctrl+ shift +enter

下方插入一行 ctrl +enter

二、常用的插件

1、css peek   html与css关联

2、prettier   代码格式化

3、Icon Fonts   图标集

4、Auto Rename Tag

修改html标签，自动帮你完成尾部闭合标签的同步修改

5 、html  boilerplate  html模板

6、color info  颜色提示

7、auto close tag  自动闭合标签

8、html css support  html中样式自动提示

9、GitLens 增强了 Visual Studio Code 中内置的 Git 功能。

10、Path Intellisense

是一个 Visual Studio Code 插件，可自动补全文件名。

它对于在 React 中导入组件非常有用，因为你不必手动输入要查找的文件的路径。

11、Color Highlight

“颜色突出显示”显示任何颜色代码的直观表示

12、cssrem

px向rem转移  支持html vue css less scss sass stylus tpl

13、Beautify

用于格式化美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码的。

14、Path Autocomplete

路径补全工具

15、Open in Browser

1.使用快捷键 Alt+B

2.右键在浏览器中查看

16、easy less

自动转换less

17、Chinese (Simplified) Language Pack for Visual Studio Code

适用于 VS Code 的中文(简体)语言包

18、HTMLClass Suggestionsclass智能提示

19、HTML CSS Support

20、HTML Snippets

21、koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件

三、常用主题

个人认为挺喜欢的一个主题，自己也在用，如图所示

5、图标主题安装  vscode-icons

6、图标主题  Material Icon Theme

四、vue相关插件和配置

1、Vetur

2、Vue 2 Snippets

vue代码提示

3、Vue VSCode Snippets

4、配置自动生成vue代码模板

第一步: 新建模板并保存

文件 –> 首选项 –> 用户代码片段 –> 输入vue，选择vue.json，配置下面代码后保存

{

"Print to console": {

"prefix": "vue",

"body": [

"",

"

\n",

"

",

"\n",

"

"export default {",

" data() {",

" return {\n",

" }",

" },",

" components: {\n",

" }",

"}",

"\n",

"

"",

"$2"

],

"description": "Log output to console"

}

}

第二步: 添加配置，让vscode允许自定义的代码片段提示出来

文件 –> 首选项 –> 设置 —> 修改这2项的值

editor.snippetSuggestions设置为top

editor.formatOnPaste勾选为true

第三步：新建vue后缀文件，输入vue，按下tab键，就可以自动出来模板代码了。

五、相关问题的配置

1、对修饰器的实验支持是一项将在将来版本中更改的功能

在用TS做vue项目时，写class时类名上提示

对修饰器的实验支持是一项将在将来版本中更改的功能。设置 “experimentalDecorators” 选项以删除此警告。如图：

解决方法：

点文件 ->  首选项 -> 设置搜索“experimentalDecorators”，如图所示勾选就可以了。

2、给文件头部和函数添加注释

首先安装koroFileHeader 插件，然后进入首选项- 设置里搜索 fileheader  进行配置，不配置可以使用默认的。如下示例配置：

{

"workbench.colorTheme": "Dracula",

"editor.fontSize": 16,

"editor.tabSize": 2,

"javascript.implicitProjectConfig.experimentalDecorators": true,

//此为头部注释,使用:快捷键ctrl+alt+i

"fileheader.customMade": {

"Description": "",

"Author": "your name",

"Date": "Do not 12312edit", //文件创建时间(不变)

"LastEditTime": "Do not edit",

"LastEditors": "Please set LastEditors", // 文件最后编辑者

"FilePath": "Do not edit"

},

// 函数注释，使用:快捷键ctrl+alt+t

"fileheader.cursorMode": {

"description" : "函数作用说明",

"param": "",

"return": "[]",

"Date" : "Do not edit",

"author" : "your name"

},

"fileheader.configObj": {

"createFileTime": true, //设置为true则为文件新建时候作为date，否则注释生成时间为date

"prohibitAutoAdd": [

"json",

"vue",

"md"

]// 禁止.json .vue .md文件，自动添加头部注释(.tsx .jsx默认不会自动添加)

}

}

更多配置参考：

3、自动换行配置

在settings.json中加入如下配置即可

"editor.wordWrap": "on",

"editor.wordWrapColumn": 150,