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