webstorm的基本操做

WebStorm 官⽅地址: www.jetbrains.com/webstorm/
安裝 WebStormcss

  1. 下載 WebStorm
    第⼀步: 經過瀏覽器訪問 WebStorm 官⽅⽹站
    第⼆步: 點擊【DOWNLOAD】按鈕,下載 WebStorm 安裝⽂件
  2. 安裝 WebStorm
    第⼀步: 雙擊 WebStorm 安裝⽂件,開始安裝 WebStorm
    第⼆步: 點擊【Next】按鈕,繼續安裝 WebStorm
    第三步: 選擇 WebStorm 的安裝路徑(注意: 不要選擇中⽂路徑)
    32-bit launcher: 若是你的操做系統是 32 位的話,選擇這個選項。
    64-bit launcher: 若是你的操做系統是 64 位的話,選擇這個選項。
    若是你想使⽤ WebStorm 做爲 JavaScript、css 和 html ⽂件的默認打開軟件的話,能夠將上述選項進⾏勾
    選。
    上述選項默認不勾選。
    第四步: 配置 WebStorm 是否建立快捷啓動⽅式和關聯相關⽂件。
    第五步: 點擊【Next】按鈕,繼續安裝 WebStorm
    第六步: 選擇開始菜單的軟件名稱,默認不修改。點擊【Install】按鈕,繼續安裝 WebStorm
    第七步: 等待⾃動安裝完成
    若是勾選,點擊【Finish】按鈕,會直接打開 WebStorm。
    若是默認不勾選,點擊【Finish】按鈕,不會直接打開 WebStorm。
    咱們選擇勾選!!!
    第⼋步: 點擊【Finish】按鈕,結束 WebStorm 安裝
    初始化 WebStorm
  3. 啓動 WebStorm
    第⼀步: 安裝完成後,第⼀次啓動 WebStorm,會看到如下界⾯
    第⼀個選項: 若是以前安裝過 WebStorm,而且保留了以前配置的話,能夠選擇這個選項,來導⼊以前
    的配置。
    第⼆個選項: 不導⼊任何配置。因爲咱們是第⼀次使⽤,選擇這個選項。
    因爲 WebStorm 是收費的,因此須要激活 WebStorm 才能正常使⽤。
    固然,WebStorm 提供 30 天的試⽤。若是選擇 30 天的試⽤的話,請勾選下⾯的選項。
    而且,點擊【Evaluate】按鈕,開始 30 天試⽤。
    第⼆步: 點擊【OK】按鈕,繼續啓動 WebStorm
    第三步: 激活 WebStorm
    值得注意的是: 30 天試⽤,超過 30 天以後,不能再正常使⽤了。(除⾮購買)
    固然,也能夠選擇直接激活 WebStorm。咱們勾選下⾯的選項:
    而後,勾選下⾯中的第⼆個選項:
    在下⾯的輸⼊框中,輸⼊註冊碼進⾏激活 WebStorm。
    註冊碼能夠參考如下(這個註冊碼有效期是⼀年):
    使⽤上述註冊碼時,須要將 0.0.0.0 account.jetbrains.com 添加到 hosts ⽂件中。
    hosts ⽂件所在的路徑以下:
    1 CNEKJPQZEX-eyJsaWNlbnNlSWQiOiJDTkVLSlBRWkVYIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiQUMiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9LHsiY29kZSI6IklJIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiUlMwIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiV1MiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJEUE4iLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJSQyIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiREMiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJEQiIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9LHsiY29kZSI6IlJNIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9XSwiaGFzaCI6IjUxOTU1OTMvMCIsImdyYWNlUGVyaW9kRGF5cyI6MCwiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwiaXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-QOxwjWvRwJz6vo6J6adC3CJ4ukQHosbPYZ94URUVFna/Rbew8xK/M5gP3kAaPh6ZDveFdtMR1UBoumq3eCwXtXM3U3ls5noB4LIr+QplVlCj2pK5uNq7g/feyNyQcHpSXtvhIOnXDBLOecB05DOsxzm0p7ulGGJoAInmHeb9mc0eYjqc4RPpUQfh6HSYBnvEnKMlLF5bz4KEtzmsvvgA55CwzwQ3gRitm5Q/wUT7AQCBdjmBfNUjKVQL6TSjSDPp56FUdEs4Aab8LqstA2DIMbxocO64rvytmcUeIwu8Mi5uq87KQP5AQMSMYb59Inbd+dmVfx5cJo3fRS4/5s3/Hg==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBaCJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOdlWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2dDup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUOH3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYiKX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqqDLgkNzuoog==
    1 C:\Windows\System32\drivers\etc
    值得注意的是: 不一樣版本的 WebStorm 的激活⽅式不一樣。具體激活⽅式能夠搜索⽹上提供的激活教程。

    Copyright (c) 1993-2009 Microsoft Corp.

    #

    This is a sample HOSTS file used by Microsoft TCP/IP for Windows.

    #

    This file contains the mappings of IP addresses to host names. Each

    entry should be kept on an individual line. The IP address should

    be placed in the first column followed by the corresponding host name.

    The IP address and the host name should be separated by at least one

    space.

    #

    Additionally, comments (such as these) may be inserted on individual

    lines or following the machine name denoted by a '#' symbol.

    #

    For example:

    #

    102.54.94.97 rhino.acme.com # source server

    38.25.63.10 x.acme.com # x client host

    localhost name resolution is handled within DNS itself.

    127.0.0.1 localhost

    ::1 localhost

    0.0.0.0 account.jetbrains.com
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    第四步: 點擊【OK】按鈕,繼續啓動 WebStorm
    第五步: 配置 WebStorm 的主題和快捷鍵⽅式等
    設置 WebStorm 的快捷鍵,咱們使⽤ Eclipse ⽅式。
    設置 WebStorm 的主題,咱們使⽤默認選項,不作任何修改。
    設置 WebStorm 的顏⾊主題,能夠根據個⼈喜愛進⾏選擇。咱們使⽤默認選項。
    Create New Project: 表示建立新的⼯程。
    Open: 表示打開已有的⼯程。
    Check out from Version Control: 表示從版本控制器下載⼯程。
    咱們選擇建立新的⼯程,因此選擇【Create New Project】選項。
    第六步: 點擊【OK】,進⼊到 WebStorm 的主界⾯
  4. 建立新的⼯程
    左邊的菜單,表示建立新⼯程的類型。⽬前,咱們只能建立⼀個空的⼯程。
    建立新⼯程的配置說明
    隨着咱們學習的推動,後⾯的課程中,咱們能夠選擇建立使⽤某個具體框架的⼯程。
    右邊選擇建立新⼯程的存儲位置。咱們能夠經過最右邊的按鈕來選擇當前⼯程存儲的位置。
    選擇好當前⼯程的存儲位置後,點擊【OK】按鈕。
    在輸⼊框中的最後,輸⼊ +⼯程名 建立新⼯程。
    輸⼊完成後,點擊【Create】按鈕,建立新的⼯程。
    完成建立新⼯程後,進⼊到 WebStorm 的開發界⾯。
    選擇頂部菜單【File】->【New】->【Project】選項,建立新的⼯程。
    選擇頂部菜單【File】->【Open】選項,打開已有⼯程。
    配置 WebStorm
  5. 建立⼯程
  6. 打開⼯程
    選擇頂部菜單【File】->【Setting】選項,打開配置窗⼝。
    選擇左邊菜單【Keymap】選項,配置 WebStorm 的快捷鍵。
  7. 配置 WebStorm配置 WebStorm 的快捷鍵選擇 Keymaps 提供的選項,肯定 WebStorm 的快捷鍵。咱們使⽤ Eclipse ⽅式。選擇左邊菜單【Editor】->【Color&Font】->【Font】選項,修改編輯器的主題。選擇左邊菜單【Editor】->【Color&Font】->【Font】選項,修改編輯器的字體。修改 WebStorm 的編輯器主題樣式修改 WebStorm 的編輯器的字體和⼤⼩經過如下選項來修改字體和⼤⼩。Primary font: 選擇字體樣式。Size: 輸⼊字體的⼤⼩。修改完成後,點擊【Apply】按鈕,保存當前修改的配置。
相關文章
相關標籤/搜索