開發工具、環境
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964286/code-256px_yXmjUSe.png)
# Visual Studio Code
推薦設定、Plugin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964290/eslint512.png)
# ESLint Rules
(with Airbnb)
# JSDoc
comment style
# DevTools tip
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964286/code-256px_yXmjUSe.png)
# Visual Studio Code
Plugin
# TODO Highlight
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964350/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964391/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964350/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964394/todo-highlight.gif)
# TODO Highlight
# TODO Tree
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964396/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964428/pasted-from-clipboard.png)
# Code Spell Checker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964559/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964560/pasted-from-clipboard.png)
# Bookmarks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964565/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964567/pasted-from-clipboard.png)
# Bookmarks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964567/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964572/bookmarks.gif)
# Bracket Pair Colorizer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964590/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964595/pasted-from-clipboard.png)
# Eslint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964611/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964657/pasted-from-clipboard.png)
# Eslint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964611/pasted-from-clipboard.png)
// settings.json
{
"eslint.autoFixOnSave": true,
}
# Eslint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964611/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964672/eslint.gif)
# Syncing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964695/pasted-from-clipboard.png)
synchronize all of your VSCode settings across multiple devices with your GitHub Gist
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964698/pasted-from-clipboard.png)
也可以套用他人 Gist 上的設定檔
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964286/code-256px_yXmjUSe.png)
# Visual Studio Code
Theme
# workbench color
// settings.json
{
// workbench IDE 本身的顏色相關
"workbench.colorCustomizations": {
// 背景
"editor.background": "#000",
// 左邊程式碼行號
"editorGutter.background": "#1c1c1c",
// 右邊 minimap 預覽
"editorOverviewRuler.errorForeground",
},
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964724/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964726/pasted-from-clipboard.png)
# workbench color
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964728/workbench_background.gif)
設定值都有 autocomplete
# tokenColorCustomizations
// settings.json
{
// syntax highlight
"workbench.colorCustomizations": {
// 註解
"comments": "#7fb785",
// 套用指定結構
"textMateRules": [
{
"scope": "storage.type.function",
"settings":{
"foreground": "#f00"
}
},
],
},
}
# tokenColorCustomizations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964736/tmscope.gif)
- Simple icons
- vscode-icons
- Kary Pro colors
- Color Highlight
- One Dark Pro
- High Contrast
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964768/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964769/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964286/code-256px_yXmjUSe.png)
# Visual Studio Code
建議設定
{
// 關閉顯示已開啟的檔案
"explorer.openEditors.visible": 0,
"editor.minimap.enabled": true,
// 如果開啟 MiniMap 的話
// 預設會顯示實際字元 (字超小),根本看不清楚
// 將這個設定關閉,就會改顯示彩色區塊而已
// 這會讓 VSCode 反應速度更快
"editor.minimap.renderCharacters": false,
// 切 tab 時左邊的檔案會跳來跳去
"explorer.autoReveal": false,
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964290/eslint512.png)
# ESLint Rules
(with Airbnb)
# Install
npm i eslint-config-airbnb-base eslint-plugin-import eslint -D
# .eslintrc.js
module.exports = {
//lint 環境
'env': {
'browser': true,
'commonjs': true,
'es6': true,
'node': true
},
'extends': 'airbnb-base',
'parserOptions': {
'sourceType': 'module'
},
'rules': {
/*
'off' 或 0 - 关闭规则
'warn' 或 1 - 开启规则,使用警告级别的错误:warn
'error' 或 2 - 开启规则,使用错误级别的错误:error
*/
'indent': [2, 4, { 'SwitchCase': 1 }],
// 強制使用單引號
'quotes': [2, 'single'],
// airbnb 不允許使用 console ,這邊打開
'no-console': 0,
'class-methods-use-this': 0,
// allow underscore
'no-underscore-dangle': 0,
'no-plusplus': 0,
'strict': 0,
'max-len': [1, { "code": 140, "tabWidth": 4 }],
'camelcase': 1,
'no-unused-vars': 1,
'no-unused-expressions': [2, {
'allowShortCircuit': false,
'allowTernary': true
}],
'brace-style': [2, 'stroustrup'],
'import/no-unresolved': 0,
'import/extensions': [2, 'always'],
'no-param-reassign': 1,
},
// 告知 lint 有這些 global variable
'globals': {
'wz3': false,
'cc': false,
'Editor': false,
'jsb': false,
'CC_EDITOR': false,
'CC_PREVIEW': false,
'CC_DEV': false,
'CC_DEBUG': false,
'CC_BUILD': false,
'CC_JSB': false,
'CC_TEST': false,
}
};
建立 .eslintrc.js 在專案根目錄下
# linter 沒過
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964820/pasted-from-clipboard.png)
# JSDoc
comment style
/**
* @enum {number}
*/
const EnumTag = {
DOG: 1,
CAT: 2,
};
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964878/pasted-from-clipboard.png)
# enum
/**
* demo
*
* @param {number} number
* @param {string} string
* @param {{}} obj
* @param {[]} ary
*/
function demoFunc(number, string, obj, ary) {
}
# number, string, object, array
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964885/pasted-from-clipboard.png)
/**
* obj was {id1:123, id2: 456}
* @param {Object} obj
* @param {Object.<string, number>} idObj
*/
function objDemo(obj, idObj) {
}
# object
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964888/pasted-from-clipboard.png)
/**
*
* @param {Array.<{
* name:string,
* age: number,
* detail:{city:string}}>} userData
*/
function complexAry(userData) {
}
# array
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964892/pasted-from-clipboard.png)
/**
*
* @param {number} [code=1]
*/
function defaultVal(code = 1) {
}
# default value
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964893/pasted-from-clipboard.png)
/**
* @returns {{name:string, age: number}}
*/
function returnAnObj() {
}
# returns object (1/2)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964898/pasted-from-clipboard.png)
/**
* @returns {number}
*/
function returnAValue() {
}
# returns object (2/2)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964899/pasted-from-clipboard.png)
# jsPerf.com
JavaScript performance playground
# 事前準備
一個 github 帳號
# 你可以
- 寫性能測試
- 看別人的測試案例
- FORK 測試案例
- 瀏覽器速度收集數據
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5964939/pasted-from-clipboard.png)
# DEMO
# DevTools tips
chrome develop tools
# $_
返回最後一次執行運算的結果
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965126/doller0.gif)
# copy
複製變數內容到剪貼簿
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965149/copy.gif)
# console.table
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965186/console.table.gif)
# debugger
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965206/debugger.gif)
# edit break point
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965222/editbreak.gif)
# edit break point
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965243/conditionbreak.gif)
# console.trace
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965258/console.trace.gif)
# console.time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/358832/images/5965268/console.time.gif)
# End
devenv
By mangogan
devenv
- 896