sublim插件(待續)

imesupport

SublimeText3默認不支持輸入法跟隨光標，這在輸入中文的時候看起來不方便。

進入SublimeText3在上面菜單欄裏Perferences點擊PackageControl，這樣就會自動安裝一個可支持插件的終端窗口。

安裝完畢以後，按快捷鍵ctrl+shift+p會彈出終端窗口，輸入install package（下方會有提示）。

而後輸入imesupport 安裝這個插件，安裝完畢後，重啓Sublime就能夠了。

 HTML-CSS-JS Prettify 

代碼自動格式化插件: 該插件是基於node的一款插件,因此想使用這個插件必須安裝node,下面來介紹一下該插件的安裝方法

按快捷鍵ctrl+shift+p會彈出終端窗口，輸入install package（下方會有提示） 而後輸入HTML-CSS-JS Prettify 

下載以後打開該   點擊按鈕,找到該插件的文件設置項,從上到下,第三個   把圖片的內容改成true

重啓編輯器就OK了!!!

 

UI文件圖標插件--- a file icon

代碼格式化插件--CodeFormatter插件

      在Sublime Text 3中編寫代碼，爲了能讓咱們的代碼格式變得漂亮整潔，須要一個能自動格式代碼的插件。這裏發現CodeFormatter插件不錯，它能支持常見的幾種編程語言：

* PHP 
* JavaScript/JSON 
* HTML
* CSS 
* SCSS 
* Python
* Visual Basic/VBScript
* Coldfusion/Railo/Lucee

2.安裝CodeFormatter插件

  在啓動Sublime Text 3程序後，使用快捷鍵 「 Ctl+Shift+P 」，再選擇 "Package Control: Install Package"，

等待列出可安裝的插件列表，輸入"CodeFormatter"找到它，並點擊便可安裝.

3.設置CodeFormatter

    根據本身的編程環境須要，可經過」Preferences > package setttings > codeFormatter > settings-user「設置一些參數,如PHP的安裝路徑。

4.使用CodeFormatter

  打開須要格式化代碼的文件，如這裏的p020.php文件，再使用快捷鍵 "ctrl+alt+f" 便可。

 

CSS格式化+css自動排序屬性層級-----csscomb

下載方法和往常同樣,下載完成後 ctrl+alt+c --->  css自動排序屬性層級

可是發現層級排完以後代碼是比較亂的,出現許多回車

解決辦法:

安裝css的格式化插件----css Format

安裝完以後進行

經過」Preferences > package setttings---css Format--settings-users

插入如下代碼,重啓編輯器,保存的時候自動格式化css代碼

{
    "format_on_save": true,
}

Sublime Text 3壓縮代碼插件Minify(原文連接:https://segmentfault.com/a/1190000012557203)

Sublime Text 3插件Minify安裝比較簡單，快捷鍵ctrl+shift+p調出package control輸入install package找到minify回車安裝便可，安裝結成功後該文檔在編輯器中彈出。本文系sublime text 3成功安裝插件Minify以後彈出的package control message介紹插件Minify的後續配置等問題的原文翻譯。
因爲本人條件有限，linux、Mac OS下未經測試，僅在windows下安裝成功，若有流程或術語錯誤，還望批評指正

如下爲原文和翻譯：

Thank you for installing `Minify' for Sublime Text
感謝您安裝sublime text 「Minify」

You must complete the installation by installing the required dependencies
你必須安裝minify所要求的依賴包以完成安裝

1. If you see this message in your Sublime Text editor then you have already installed the `Minify` package.Please proceed to step 2:
   若是你在sublime text編輯器中看到這則信息說明你已經完成了插件minify的安裝。請進行步驟2

2. Install Node.js
   安裝node.js
   Windows and Mac OS X users should just visit https://nodejs.org/ and click on the INSTALL button,
   Linux users can download pre-compiled binary files from https://nodejs.org/download/ 
   Windows和Mac OS X用戶只須要訪問https://nodejs.org/ 而且點擊install按鈕安裝便可,
   Linux請用戶在https://nodejs.org/download/ 下載對應的預編譯二進制文件
   After successful installation, please make sure that `node` is in your `PATH`, here is how to test it:
   完成安裝後，請確認node.js安裝已安裝成功，你能夠按以下方法測試：
   Open up a shell window (`Terminal` on Mac OS X, `CMD.exe` on Windows) and issue the following command:
   打開命令行（Mac OS 下的終端/windows下的cmd.exe）輸入如下命令

   node --version

   You should see a version number. But if you see an error message such as `command not found` or something

   similar then `node` is not available via your `PATH` and you must fix this!
   你會看到對應版本號。可是若是報錯，譬如command not found則說明安裝失敗，請及時修復

3. Install required Node.js CLI apps:
   安裝所需依賴包
   From a shell window (`Terminal` on Mac OS X, `CMD.exe` on Windows) issue the following command:
   在命令行輸入如下命令，安裝所需依賴包

   npm install -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo

   Notes:
   注意
   If you are on Mac OS X and you get an error here then issue the following command from `Terminal`:
   若是在mac os上報錯多是權限問題，請輸入如下命令

   sudo chown -R $USER /usr/local

   and then try to issue the npm install command from above again.
   `加上這行命令後再嘗試安裝npm
   If you are never going to work with e.g. SVG files then you can leave out `svgo` from the above npm install command. You can also leave out `uglifycss`, etc.
   若是你不打算使用到svg文件，你能夠不安裝svgo包，相似的，你也能夠不安裝uglifycss。

   If you already have some or all of the above Node.js CLI apps installed on your system then it is recommended to update them all to the latest version with the following command:
   若是你已經安裝了上述npm包，建議你更新到最新版本，npm包更新命令：

   npm update -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo

   Please test that the installed Node.js CLI apps are available via your `PATH`, here is how:

   Still from a shell window (`Terminal` on Mac OS X, `CMD.exe` on Windows) issue the following command,
   for example:
   一樣，安裝完畢後，請輸入指令檢查是否安裝成功：

   cleancss --version

   You should see a version number. But if you see an error message such as `command not found` or something
   similar then `cleancss` is not available via your `PATH` and you must fix this!
   You may want to do this test for all Node.js CLI apps (`cleancss`, `uglifycss`, `js-beautify`, `uglifyjs`,`html-minifier`, `minjson` and `svgo`).
   安裝成功將看到對應包的版本號，若是報錯請及時修復。
   相同方法能夠檢查cleancss、uglifycss、js-beautify、uglifyjs、html-minifier、minjson和svgo是否也安裝成功了。

What is `Minify`

`Minify` for Sublime Text can create a minified version of a currently open CSS, HTML, JavaScript, JSON or SVG file.
Sublime text插件minify能夠輕鬆地幫助你壓縮CSS、HTML、JS、JSON或者svg文件

`Minify` generates a new file with an altered file extension such as `.min.css`, `.min.html`, `.min.js`, `.min.json`
or `.min.svg`.
Minify將所要壓縮的文件進行壓縮後生成一個後綴名爲imin.css、min.html、min.js、min.json、min.svg的文件

It can be easily configured to generate .map files too for minified CSS and JavaScript files.
你也能夠輕鬆配置爲壓縮過的css、js文件生成map文件

Compared to other Sublime Text minifier packages `Minify` is very light: the plugin itself is less than 250 lines of Python code. Once installed `Minify` does not need Internet access to do its job, it works offline.
相比sublime text的其餘壓縮插件，minify很是輕量，僅由少於250行python編寫而成，一旦安裝完畢便可離線使用，無需再次連網。

`Minify` has been tested under both Sublime Text 2 and Sublime Text 3 and it should work fine on all supported platforms (Linux, Mac OS X and Windows).
Minify已經在sublime text 2和sublime text 3上測試經過，在各系統上表現良好（Linux, Mac OS X 和 Windows）。

`Minify` depends on other programs written in Node.js to do its job. Detailed installation instructions for those dependencies are provided above.
Minify所需的node.js依賴包的安裝指南上文已提供。

Which 3rd party programs are used by `Minify`
Minify所使用的第三方程序以下：

How to use `Minify`

Open a .css or .htm or .html or .js or .json or .svg file in your Sublime Text editor and you can
在sublime text編輯器中打開一個.css或.htm或.html或.js或.json或.svg文件，你能夠：

• a) use the Context Menu inside the Sublime Text editor window,
  使用編輯器的快捷菜單
• b) access the Minify file or Beautify file commands under Tools / Minify menu in Sublime Text,
  tools-----minify-----minify file(beautify file)執行編譯
• c) use one of the following keyboard shortcuts:
  或使用快捷鍵
  ctrl + alt + m ( super + alt + m Mac OS X )

This minifies the current buffer and saves the minified version into the same directory with the
appropriate .min.css or .min.htm or .min.html or .min.js or .min.svg file extension then it opens the minified file in a new editor window.
被壓縮的文件保存在同目錄下，並以.min.css的形式命名。以後，壓縮過的文件將在新窗口中被打開。

ctrl + alt + shift + m ( super + alt + shift + m on Mac OS X )
This beautifies the current buffer and saves the beautified version into the same directory with the appropriate .beautified.css or .beautified.htm or .beautified.html or .beautified.js or .pretty.svg file extension then it opens the beautified file in a new editor tab.
快捷鍵ctrl + alt + shift + m則會生成文件名爲.Beautified.css的格式化的文件，並在新窗口中打開。

User settings

You can put your customized settings here:
你能夠經過如下菜單選項定製本身的配置

Preferences > Package Settings > Minify > Settings - User 

To find out what the possible options are please see:
你能夠在一下菜單選子查看可修改的配置

Preferences > Package Settings > Minify > Settings - Default 

Please do not edit the "Settings - Default" file!!
請不要編輯默認文件"Settings - Default"（全部定製化的設置編輯在setting-user中）

Project settings

Also, you can override the default and user settings for individual projects. Just add a "Minify" object to the "settings" object in the project's .sublime-project file containing your project specific settings.
你也能夠爲獨立項目覆蓋默認和用戶設置，在setting心中添加minify對象便可，sublime項目文件將會包含你的特殊設置。

Example:

{

"settings": { "Minify": { "open_file": false, "auto_minify_on_save": true, "allowed_file_types": [ "css", "js", "svg" ] } } }
空行刪除插件---Trailing spaces

能夠檢測和一鍵刪除代碼的空格，保存時自動刪除多餘空格，讓你的代碼更加緊湊規範

下載方法就不說了,下面附上個人此插件配置.

{
    // By default, Trailing Spaces is "live". It means the trailing spaces
    // regions will be matched in the background, and highlighted if a color
    // scope is defined, when the document is opened and edited.
    // Set to false to disable live matching and highlighting (the deletion
    // command remains available, so-called "lazy matching").
    "trailing_spaces_enabled": true,
    // Highlight color is specified as a scope. You may define and use a custom
    // scope to better fit your colorscheme. A value of empty string "" will
    // make highlights invisible.
    "trailing_spaces_highlight_color": "",
    // By default, empty lines are cleared as well when calling the deletion
    // command.
    // Set to false to ignore empty lines upon deletion.
    "trailing_spaces_include_empty_lines": true,
    // By default, the line being currently edited will have its trailing
    // spaces highlighted.
    // Set to false to ignore trailing spaces on the edited line.
    "trailing_spaces_include_current_line": true,
    // By default, trailing spaces are deleted within the whole document.
    // Set to true to affect only the lines you edited since last save.
    // Trailing spaces will still be searched for and highlighted in the whole
    // document.
    "trailing_spaces_modified_lines_only": false,
    // By default, nothing happens on save.
    // Set to true to trim trailing spaces before saving, with respect to the
    // other settings.
    "trailing_spaces_trim_on_save": true,
    // By default, deleting trailing spaces does not cause the document to be
    // saved.
    // Set to true to force saving after trailing spaces have been deleted.
    // This setting is irrelevant and will be ignored if trim_on_save is true.
    "trailing_spaces_save_after_trim": true,
    // ---- NEXT SETTINGS ARE FOR POWER USERS ONLY! ----
    // Highlighting will be disabled if the edited file's size is larger than
    // this.
    // Adjust the value (in number of chars) to whatever fits your performance.
    "trailing_spaces_file_max_size": 1048576,
    // By default, only simple spaces and tabs are matched as "trailing spaces".
    "trailing_spaces_regexp": "[ ^\n]"
}

 代碼提示插件   ------連接(https://blog.csdn.net/hehexiaoxia/article/details/54134756)

 

jshint

使用此插件須要安裝SublimeLinter 和  SublimeLinter-jshint兩個插件  安裝完後   安裝jshint    npm i -g jshint

新建.jshintrc文件,自定義檢測代碼的配置,完活

 

sublime 設置新建文件自動添加author(做者)等文件頭信息-------file Header 

設置方法

1.打開插件目錄

找到固定文件(個人是python文件加head頭,若是你是js的文件加,請找到js文件)

打開文件,修改裏面的內容,保存,新建一個文件你會發現出現了你自定義的標題

 Autoprefixer ---css後處理器插件

CSS 後處理器 是對 CSS 進行處理，並最終生成 CSS 的 預處理器，它屬於廣義上的 CSS 預處理器。
咱們好久之前就在用 CSS 後處理器 了，最典型的例子是 CSS 壓縮工具（如 clean-css），只不過之前沒單獨拿出來講過。
還有最近比較火的 Autoprefixer，以 Can I Use 上的 瀏覽器支持數據 爲基礎，自動處理兼容性問題。

 

配置詳見:https://github.com/sindresorhus/sublime-autoprefixer

配置node運行環境詳見： https://www.cnblogs.com/purple-sweet-pottoes/p/5828819.html