前提是前往 官网下载软件
参考链接:https://www.sublimetext.com/3 官网下载地址 -> 选择适合自己操作系统的版本
安装并打开后:
- 参照下图所示安装汉化插件(纯手工编辑的哟)
- Emmet
传说中快速的编写html代码的“神器”。
使用教程:https://www.w3cplus.com/tools/emmet-cheat-sheet.html
- Better Completion
github https://github.com/Pleasurazy/Sublime-Better-Completion
javascript ,jQuery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。
- 安装完以后它的配置文件可以配置自己需要补全的库
ctrl + shift + p
sbc settings use
//copy以下代码 并保存文件
{
// --------------------
// sublime-better-completions-Package (sbc package)
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
//
// Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
//
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
"completion_active_list": {
// build-in completions
"css-properties": false,
"gruntjs-plugins": false,
"html": true,
"lodash": false,
"javascript": true,
"jquery": true,
"jquery-sq": false, // Single Quote
"php": false,
"phpci": false,
"sql": false,
"twitter-bootstrap": false,
"twitter-bootstrap-less-variables": false,
"twitter-bootstrap3": false,
"twitter-bootstrap3-sass-variables": false,
"underscorejs": false,
"react": false,
// Your own completions?
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
"my-angularjs": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
"my-glossary": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
"my-html": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
"my-javascript": false
}
}
- 激活
帮助 -> 注册码
//copy 以下代码 点击确认
—– BEGIN LICENSE —–
TwitterInc
200 User License
EA7E-890007
1D77F72E 390CDD93 4DCBA022 FAF60790
61AA12C0 A37081C5 D0316412 4584D136
94D7F7D4 95BC8C1C 527DA828 560BB037
D1EDDD8C AE7B379F 50C9D69D B35179EF
2FE898C4 8E4277A8 555CE714 E1FB0E43
D5D52613 C3D12E98 BC49967F 7652EED2
9D2D2E61 67610860 6D338B72 5CF95C69
E36B85CC 84991F19 7575D828 470A92AB
—— END LICENSE ——
- javascript next - ES6 syntax
javascript ES6 语法高亮的支持。
- html-css-jsprettify
之前格式化 js,css 文件使用的都是 JsFormat 和 CSSFormat。每次在不同的文件中都要去使用两个不同的插件。后来找到一个可以支持三种语言格式化的插件。
对Html,css,js文件进行格式化。
//html-css-jsprettify插件快捷键
{"keys": ["command+alt+l"],"command": "htmlprettify"},
- Material Theme
主题安装
- 用户设置
"font_face": "Comic Sans MS",
"font_size": 14.0,
"tab_size": 2,
图标包 A File Icon
自动提示文件路径名 AutoFileName
less 高亮显示 LESS
ConvertToUTF8 可以使 sublime 识别中文,避免出现乱码问题
TypeScript syntax 识别 TypeScript 语法插件
React 开发环境配置
- Vue Syntax highlighting Vue 语法高亮