vscode設置、Emmet、npm和yarn

1、VScode自定義設置

我的VScode配置

使用 Settings Sync 插件 同步設置

使用 REST Client 在 VScode 完成api 測試請求，可以將該文件放到代碼中，方便開發

 

@hostname=http://app-t.healthservice.mobile.xxxxx.com
@port=80
@host={{hostname}}:{{port}}/mobilenet
# 注意：不能有空格出現

# RFC 2616 標准
### # POST 請求
POST {{host}}/booking/org/getImage HTTP/1.1
content-type: application/json

{
  "channelType": "CKJKX",
  "fileId": "da372ee87fcd499c8e2f28cedd63942b"
}

### # get請求
{{host}}/greenchannel/areaHospital/getDiseases

淺色主題：

{
  "editor.minimap.enabled": true,
  "editor.renderControlCharacters": false,
  "workbench.activityBar.visible": true,
  "editor.cursorStyle": "block",
  "editor.tabSize": 2,
  "editor.fontSize": 18,
  "files.autoSave": "onFocusChange",
  "editor.mouseWheelZoom": true,
  "emmet.triggerExpansionOnTab": true,
  "editor.renderWhitespace": "all",
  "explorer.confirmDragAndDrop": false,
  // 文件夾顯示
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/dist": true,
    "**/.DS_Store": true,
    "workbench.statusBar.feedback.visible": false,
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.shell.windows": true,
    "**/bower_components": true,
    "**/jspm_packages": true,
    "**/node_modules": true
  },
  // 顏色主題
  "workbench.colorTheme": "Default Light+",
  // 覆蓋當前所選顏色主題的顏色。
  "workbench.colorCustomizations": {
    "editor.background": "#ece6d3",
    "editor.foreground": "#bba345",
    "editor.selectionBackground": "#f7ec56",
    "editor.lineHighlightBorder": "#e67a59",
    "editorLineNumber.foreground": "#47463f",
    "editorCursor.foreground": "#e67a59",
    "activityBar.foreground": "#333333",
    "activityBar.background": "#d6cdcd",
    "tab.activeBackground": "#e7dfc8",
    "tab.activeForeground": "#867f7f",
    "tab.inactiveForeground": "#666666"
  },
  // 基於編輯器設置的顏色主題，自定義語法着色
  "editor.tokenColorCustomizations": {
    "functions": "#1da11d", //函數顏色
    "strings": "#aa2727", //字符串顏色
    "keywords": "#ff0000", //關鍵字顏色
    "variables": "#333333", //變量顏色
    "numbers": "#f5461a", //數字顏色
    "types": "#1c2224", //類型定義顏色
    "comments": "#60635e" //注釋顏色
  },
  // js格式化匿名函數名與括號之前不加空格
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  // px To rem 插件
  "px-to-rem.px-per-rem": 18,
  "px-to-rem.number-of-decimals-digits": 0,
  "px-to-rem.only-change-first-ocurrence": false,
  "px-to-rem.notify-if-no-changes": true,
  /* prettier 的配置 */
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": false,
  "prettier.singleQuote": false,
  "prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行
  "prettier.arrowParens": "avoid", //  (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號
  "prettier.bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }"
  "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置
  "prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto
  "prettier.htmlWhitespaceSensitivity": "ignore",
  // "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
  // "prettier.parser": "babylon", // 格式化的解析器，默認是babylon
  // "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  // "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行
  // "prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
  // "prettier.trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號）
  // "prettier.stylelintIntegration": false, //不讓 prettier 使用stylelint的代碼格式進行校驗
  // "prettier.tslintIntegration": false, // 不讓 prettier 使用 tslint的代碼格式進行校驗
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 80,
      "singleQuote": true, 
      "semi": false,
      "tabWidth": 2,
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "proseWrap": "never" //  preserve never 代碼超出是否要換行 preserve保留
    }
  },
}

 

2、VSCode 常用快捷鍵

上下移動一行：Alt + Up / Alt + Down

選擇從光標到行尾： Shift+End

選擇從行首到光標處： Shift+Home

刪除光標右側的所有字： Ctrl+Delete

多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up

同時選中所有匹配： Ctrl+Shift+L

3、Emmet 語法

VsCode內置了Emmet語法,在后綴為.html/.css中輸入縮寫后按 Tab鍵 即會自動生成相應代碼。

語法規則:

E 代表HTML標簽。

E#id 代表id屬性。

E.class 代表class屬性。

E[attr=foo] 代表某一個特定屬性。

E{foo} 代表標簽包含的內容是foo。

E>N 代表N是E的子元素。

E+N 代表N是E的同級元素。

E^N 代表N是E的上級元素。

常用語法

div => <div> </div>
foo => <foo> </foo>
html:5或! => 將生成html5標准的包含body為空基本dom
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

文本操作符（Text）

div{這是一段文本}  =>  <div>這是一段文本</div>
a{點我點我}  =>  <a href="">點我點我</a>

屬性操作符（Attribute）

div.test  =>  <div class="test"></div>
div#pageId  =>  <div id="pageId"></div>

嵌套操作符（Nesting）

子級： >

div#pageId>ul>li 
=> 
<div id="pageId">
    <ul>
        <li></li>
    </ul>
</div>

同級： +

div#one+div#two =>
  <div id="one"></div>
  <div id="two"></div>

乘法： *

ul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

 

自動計數（numberi1ng）

生成重復項時增加一個序號，只需要加上 $ 符號即可。

 ul>li.box${$}*3 =>
  <ul>
    <li class="box1">1</li>
    <li class="box2">2</li>
    <li class="box3">3</li>
  </ul>

注意：如果生成 兩位數 則使用兩個連續的 $$，更多位數以此類推

 

4、npm 和 yarn

yarn命令文檔

npm命令文檔

## 設置淘寶鏡像
npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org

## 初始化項目:
yarn init -y
npm init -y

## 下載項目的所有聲明的依賴:
yarn
npm install

## 下載指定的運行時依賴包:
yarn add webpack@3.2.1
npm install webpack@3.2.1 -S

## 下載指定的開發時依賴:
yarn add webpack@3.2.1 -D
npm install webpack@3.2.1 -D

## 全局下載指定包:
yarn global add webpack
npm install webpack -g

## 刪除依賴包:
yarn remove webpack
npm remove webpack -S
yarn global remove webpack
npm remove webpack -g

## 運行項目中配置的 script:
yarn run xxx
npm run xxx

## 查看某個包的信息:
yarn info xxx
npm info xxx

 

nrm：快速實現npm源的切換

npm i nrm -g // 安裝 nrm
nrm ls // 查看下包列表
nrm use taobao // 切換源

nrm可以增加定制的源，特別適用於添加企業內部的私有源

cnpm

npm i cnpm -g

 

PM2 

$ pm2 start app.js --name="api" # 啟動應用程序並命名為 "api"
$ pm2 stop 0                    # 停止 id為 0的指定應用程序
$ pm2 restart all              # 重啟所有應用
$ pm2 delete all                # 關閉並刪除所有應用
$ pm2 delete 0                  # 刪除指定應用 id 0