HTLF

一步一个脚印,走出高度...

导航

VS Code 使用小技巧

vscode 下载

  • 下载
  • 安装,一直下一步

插件安装

  • 所有插件或热门插件查找传送
  • Emmet编码快捷方式 传送

安装常见文件

  1. 安装插件出现 错误unable to verify the first certificate (无法确认第一证书)
  • 解决方法如下:
    • 在vscode 下 进入 文件->首选项-->设置 在上面的搜索框输入 proxy,会出现 有3个相关设置项,设置如下的选项 
// 是否应根据提供的 CA 列表验证代理服务器证书。
  "http.proxyStrictSSL": true, 
//设置为false , 这时候会在右侧的自定义设置中增加一条
  "http.proxyStrictSSL": false,

 

 

    重启 VScode ,然后在安装插件,会发现神奇的可以安装了。

前端开发必备插件

插件

1、HTML Snippets

  超级使用且初级的H5代码片段以及提示

2、HTML CSS Support 

  让HTML标签上写class智能提示当前项目所支持的样式

3、jQuery Code Snippets

  jQuery 提示工具

4、Path Intellisense

  路径提示补全

5、Document this

  Js的注释模板

6、ESlint

  ESlint接管原声js提示,可以自定制体会规则 

7、Auto Close Tag

  自动补全html标签

8、Auto Rename Tag

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

9、默认浏览器查看HTML文件

  Open In Browser (快捷键Alt+B可以修改)

  View InBrowser (快捷键Ctrl+F1可以修改)

 

10、beautify

  格式化代码的工具

11、Rainbow Brackets

  彩虹括号(不推荐用)

12、Guides(新版已经包含)

  标签对其线

13、Project Manager

  在多个项目之前快速切换的工具

14、vscode-icons

  让 vscode 资源树目录加上图标;点击设置->如图:

  

15、background

  可以让vscode的背景修改为自己喜欢的图,最多3张照片

  https://marketplace.visualstudio.com/items?itemName=shalldie.background

  图片配置

 

// Plugin background enabled.background 插件是否启用
"background.enabled": false,

// Use default images.使用默认图片
"background.useDefault": false,

// Your custom Images(Max length is 3). 自己定制背景图,最多3个
"background.customImages": [
"file:///E:/wushen.png",
"file:///E:/wushen.png",
"file:///E:/wushen.png"
]

 


  

16、markdownlint

  Markdown格式提示

  可以通过快捷键 Ctrl+Shift+V来预览最终的显示效果

17 、Atom Keymap

  在安装这个插件并重启 VS Code 之后,将使你的 VS Code 中可以使用 Atom 的键盘快捷键。

18、Sublime Text Keymap and Settings Importer

  在安装这个插件和重启 VS Code 之后,将在 VS Code 中导入 Sublime Text 的键盘快捷键。可以通过 VS Code 的强大智能感知来使用熟悉的 Sublime Text 键盘快捷键。

 19、 JavaScript (ES6) code snippets

  用代码片段加快 ES6 开发速度,例如输入 imd 可以自动生成如下代码:

 20、 Document This

  在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释

 

 

vsCode配置

// 控制是否显示 minimap(缩略图)
   "editor.minimap.enabled": true,

// 视区宽度自动换行设置。
 "editor.wordWrap": "on",

// 指定用在工作台中的颜色主题。
 "workbench.colorTheme": "Monokai",

  

前端开发推荐插件

  • Console Ninja
    • 安装该插件,代码运行后console.log后面就会显示其运行信息.
    • 安装后设置 [启用]Enable PRO [购买]Purchase PRO [使用免费版本]Use free version
  • Error Lens
    • 常见单词及标签,错误提示插件
  • Parameter Hints
    • 提示函数的参数类型及消息

posted on 2017-01-18 16:57  HTLF  阅读(4985)  评论(0编辑  收藏  举报