九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
Sublime Text3(mac版)上好用的插件

本節(jié)索引

  1. sublime Text3 插件的安裝

  2. 代碼編輯非常有用的5個(gè)插件

  3. 配置React 開發(fā)環(huán)境所需要的插件支持


首先 請(qǐng)查看你的sublime Text3 上是否安裝了Package Control ,

安裝 Package Ctrol: 使用 ctrl + ~ 打開控制臺(tái),輸入以下代碼:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
1. 代碼格式化的插件 (格式化HTML+CSS+JS+JSON代碼的插件)

HTML-CSS-JS Prettify 是一個(gè)可以格式化HTML、CSS、Javascript和JSON的sublime插件,有著很棒的格式化效果。不過建議大家學(xué)習(xí)常用的代碼編輯格式盡量寫到符合標(biāo)準(zhǔn)的代碼

  • 安裝過程如下:

      1. 在Sublime Text中,按下Ctrl+Shift+P調(diào)出命令面板;  2. 輸入install 調(diào)出 Install Package 選項(xiàng)并回車;  3. 輸入pretty,并在列表中選擇HTML-CSS-JS Prettify后回車即可安裝
  • 可能遇到的問題以及解決方案(全部安裝正確但格式化不能使用

    1、Node.js路徑配置不對(duì)(首先確保安裝了Node.js),修改一下HTML-CSS-JS Prettify的用戶配置即可(Preferences -> Package-settings -> HTML/CSS/JS Prettify -> Set Prettify Preferences):

    2、如果路徑?jīng)]有問題,查看是不是sublime打開的文件路徑中有中文,由于HTML-CSS-JS Prettify不支持utf-8,打開文件路徑如果有中文,也會(huì)報(bào)Node.js路徑錯(cuò)誤。

      解決辦法如下:      1、preferences->Browse Packages(打開sublime 的安裝文件)        2、修改 HTML-CSS-JS Prettify 目錄下的 HTMLPrettify.py 文件      383行:node_path = PluginUtils.get_node_path() 改為:node_path = PluginUtils.get_node_path().encode("utf-8")      4、85行:file_path = self.view.file_name() 改為:file_path = self.view.file_name().encode("utf-8")
2.Js和Css語法檢查插件 sublimelinter以及配套的插件

啟動(dòng)Package Control安裝sublimelinter 插件安裝sublimelinter-jshint(備選安裝 sublimelinter-jslint)安裝sublimelinter-csslint安裝node運(yùn)行環(huán)境

注意不要使用jsxhint,這是針對(duì)于需要支持react語法的插件,想要安裝react語法插件請(qǐng)參照后面的sublime 搭建react開發(fā)環(huán)境

  1. 全局安裝 jshint /csslint

     安裝命令:sudo npm install -g jshint 注意插件名稱都為小寫.         :sudo npm install -g csslint
  2. 將下列代碼復(fù)制到
    Preference->package Settings->SublimeLinter->Setttings-User 中

     注意下面代碼中的(第五行和第六行 sublimelinter_executable_map)JSCss的路徑問題:     mac中可以再終端用 which node命令 查看node的安裝路徑     windows 中找到實(shí)際的node安裝位置復(fù)制路徑即可。 { "sublimelinter": "save-only", "sublimelinter_popup_errors_on_save": true, "sublimelinter_executable_map": {     "javascript": "/usr/local/bin/node",     "css": "/usr/local/bin/node"     }, "jshint_options": {     "strict": false,     "quotmark": "single", //只能使用單引號(hào)     "noarg": true,     "noempty": true, //不允許使用空語句塊{}     "eqeqeq": true, //!==和===檢查     "undef": true,     "curly": true, //值為true時(shí),不能省略循環(huán)和條件語句后的大括號(hào)     "forin": true, //for in hasOwnPropery檢查     "devel": true,     "jquery": true,     "browser": true,     "wsh": true,     "evil": true,                 "unused": "vars", //形參和變量未使用檢查     "latedef": true, //先定義變量,后使用     "globals": {         "grunt": true,         "module": true,         "window": true,         "jQuery": true,         "$": true,         "global": true,         "document": true,         "console": true,         "setTimeout": true,         "setInterval": true         }     }, "csslint_options": {     "adjoining-classes": false,     "box-sizing": false,     "box-model": false,     "compatible-vendor-prefixes": false,     "floats": false,     "font-sizes": false,     "gradients": false,     "important": false,     "known-properties": false,     "outline-none": false,     "qualified-headings": false,     "regex-selectors": false,     "shorthand": false,     "text-indent": false,     "unique-headings": false,     "universal-selector": false,     "unqualified-attributes": false     } }

    sublimelinte 支持的語言截圖(后續(xù)的語言支持需要用戶自行配置)


    sublimelinte 支持的語言截圖
3. JSFormat 插件(只是針對(duì)于js文件有效,想要格式化HTML等文件,請(qǐng)參照第一點(diǎn))

  1. 按下快捷鍵 Ctrl+Alt+p 打開Package Control命令面板

  2. 輸入 jsformat 回車安裝即可.

  3. 在你寫javascript代碼時(shí),選中需要格式化的代碼,按下 Ctrl+Alt+f 快捷鍵后,js代碼自動(dòng)格式化對(duì)齊,趕快試一試吧!

  4. 如果上面的快捷鍵使用無效可以使用命令格式化代碼,你可以選中要格式化的代碼 ,然后按下 Ctrl+Alt+P (mac 系統(tǒng) command + shift +p) 輸入命令: Format:javascript 回車即可格式化.

4. Emmet 是一個(gè)前端開發(fā)的利器 用于自動(dòng)完成HTML的代碼書寫

  1. Emmet 的基本用法是:輸入簡寫形式,然后按 Tab 鍵。

  2. 關(guān)于 Emmet 的更多用法,請(qǐng)看官方文檔,這份速查表可以幫你快速記憶簡寫形式。

  3. Emmet安裝:在Package Control中 install Package -> Emmet 安裝Emmet.

  4. 使用:輸入特定含義的字符 按 Tag 自動(dòng)完成

5. Theme – Soda + sublime Text3 主題修改

  1. 安裝:
    Theme – Soda
  2. 配置:

     在 Preferences ->Setting - User 中的[]中括號(hào)中添加,(注意配置文是數(shù)組的形式) "theme": "Soda Light.sublime-theme""theme": "Soda Dark.sublime-theme"

6.Sublime Text 3安裝React 開發(fā)環(huán)境插件


  1. babel-sublime 支持ES6,React.js, jsx代碼高亮,對(duì) JavaScript, jQuery 也有很好的擴(kuò)展

    • 安裝:PC上ctrl+shift+p(MacCmd+shift+p)打開面板輸入babel安裝

    • 配置:打開.js, .jsx 后綴的文件;

        打開菜單view,  Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),  選擇babel為默認(rèn) javascript 打開syntax
  2. sublimeLinter-jsxhint JSX 代碼審查,實(shí)時(shí)提示語法錯(cuò)誤, 幫助快速定位錯(cuò)誤

    • 安裝PC上 ctrl+shift+p(MacCmd+shift+p)打開面板輸入sublimeLinter-jsx安裝(請(qǐng)先確保sublimeLinter安裝成功)

    • 必須有node.js環(huán)境支持 安裝node.js

    • 安裝node中安裝jsxhint
      npm install -g jsxhint

  3. 修改Emmet兼容jsx 文件(使用Tag 快速完成react 代碼書寫)


    JSX語法書寫
    • 安裝PC上 ctrl+shift+p(MacCmd+shift+p)打開面板輸入emmet安裝

    • 使用方法 打開preferences -> Key bindings - Users,把下面代碼復(fù)制到[ ]中括號(hào)內(nèi)部(注意配置文件為數(shù)組形式)。

        {      "keys": [          "super+e"      ],      "args": {          "action":"expand_abbreviation"      },      "command":"run_emmet_action",      "context": [{          "key":"emmet_action_enabled.expand_abbreviation"      }]  },  {      "keys": ["tab"],      "command":"expand_abbreviation_by_tab",      "context": [{          "operand":"source.js",          "operator":"equal",          "match_all": true,          "key":"selector"      }, {          "key":"preceding_text",          "operator":"regex_contains",          "operand":"(\b(a\b|div|span|p\b|button)(\.\w*|>\w*)?({FNXX==XXFN}*?}$)?)",          "match_all": true      }, {          "key":"selection_empty",          "operator":"equal",          "operand": true,          "match_all": true      }]  }
      • 使用super+e觸發(fā) emmet;
      • 正則判斷用 a,div,span,p,button標(biāo)簽?zāi)J(rèn)tab 觸發(fā);
      • 默認(rèn) class 修改為 className 注 supre+e 在 PC 上指的是win+e(pc 建議修改為emmet 默認(rèn)按鍵 ctrl+e),在 mac 上指的是cmd+e
      • 詳細(xì)請(qǐng)參考規(guī)則來源StackOverflow,正則小有修改
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
強(qiáng)大的Sublime編輯器
Sublime Text 3 支持的熱門插件推薦
開發(fā)者最常用的8款Sublime text 3插件
使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代碼(轉(zhuǎn))
sublime text 批量添加 snippet 便捷方法 | Phpvar's Blog
零基礎(chǔ)小白安裝Sublime Text 4軟件
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服