Editors

VSCode setup

Theme

I use the Oceanic Next theme with the dimmed bg option. Link →

I use the Oceanic Next theme with the dimmed bg option. Link →

Extensions used in course videos

For each of the extensions, read the overview page in order to learn how to use it.

Auto Close Tag to automatically close HTML tags. Link →

Auto Rename Tag to automatically change matching HTML tags. Link →

Color Highlight to, as the name says, highlight colors in CSS. Link →

Paste and Indent to automatically indent pasted code. Link →

Path Intellisense to autocomplete filenames. Link →

Prettier to automatically format code. Link →

Other extensions I use (will keep it updated)

Project Manager to easily switch between projects. One of the most useful extensions. Link →

Settings

If you want your editor to work and look exactly the same way as mine does in the course videos, you can copy these settings to your own settings file. Just go to settings in VSCode, and on the right side, you can paste this code.

If you want your editor to work and look exactly the same way as mine does in the course videos, you can copy these settings to your own settings file. Just go to settings in VSCode, and on the right side, you can paste this code.

{
  "workbench.colorTheme": "Oceanic Next (dimmed bg)",
  "files.autoSave": "onFocusChange",
  "editor.minimap.enabled": true,
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": true,
  "editor.formatOnSave": false,

  "workbench.colorCustomizations": {
    "statusBar.background": "#333333",
    "statusBar.noFolderBackground": "#333333",
    "statusBar.debuggingBackground": "#263238"
  },
  "editor.fontSize": 16,

  "css.validate": false,
  "scss.validate": false,
  "less.validate": false,
  "editor.wordWrap": "on"
}

Sublime-text extension I use

sublime 插件:

packagecontrol

emmet

phpcs

wordpress code reference

colorhighlight , 不是colorhighlighter

sublime linter

alignment

autofilename

autoprefixer

highlighter

bootsrap4snippets

Php snnipits

SideBarEnhancements : 增强侧边栏右键功能,可以直接创建文件和其他操作。

          输入查询 Install Package,选择进入 安装页面(右图)

安装好以后点击工具栏的preferences > package setting > side bar > Key Building-User,键入以下代码

[

/*{ “keys”: [“alt+f12”], “command”: “side_bar_open_in_browser”, “args”:{“paths”:[], “type”:”production”, “browser”:””} },*/

{ “keys”: [“ctrl+shift+c”], “command”: “copy_path” },

//chrome { “keys”: [“f1”], “command”: “side_bar_files_open_with”, “args”: { “paths”: [], “application”: “C://Program Files (x86)//Google//Chrome//Application//chrome.exe”, “extensions”:”.*” } },

//firefox { “keys”: [“f2”], “command”: “side_bar_files_open_with”, “args”: { “paths”: [], “application”: “E://软件//Firefox//firefox.exe”, “extensions”:”.*” //匹配任何文件类型 } },

//ie { “keys”: [“f3”], “command”: “side_bar_files_open_with”, “args”: { “paths”: [], “application”: “C://Program Files//Internet Explorer//iexplore.exe”, “extensions”:”.*” } },

]

JSFormat  /  CodeFormatter

功能:Javascript的代码格式化插件

简介:很多网站的JS代码都进行了压缩,一行式的甚至混淆压缩,这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理,包括换行和缩进等等,使代码一目了然,更快读懂~ 我电脑上安装JSFormat 不起作用,后面找到 CodeFormatter,同样可以实现功能。

使用:在已压缩的JS文件中,右键选择jsFormat或者使用默认快捷键(Ctrl+Alt+F)

http:wordl

Alignment

功能:”=”号对齐

简介:变量定义太多,长短不一,可一键对齐

使用:默认快捷键Ctrl+Alt+A和QQ截屏冲突,可设置其他快捷键如:Ctrl+Shift+Alt+A;先选择要对齐的文本

主要用在变量对齐等方面

Bracket Highlighter

功能:代码匹配

简介:可匹配[], (), {}, “”, ”, <tag></tag>,高亮标记,便于查看起始和结束标记

使用:点击对应代码即可,标签自动匹配。

Sublime CodeIntel 代码提示和补全

Doc​Blockr 生成优美注释