windows
常用命令
查看埠的使用情況
netstat -ano // 查看所有的埠使用情況
用命令以管理員的方式打開檔案
notepad 檔案
IDEA
快捷鍵
編輯類
#游標多點
Shift + ctrl + alt + 滑鼠左鍵
#游標跳到行尾
end
#游標跳到行首
home
#游標跳到新的一行
shift + 回車
#大小寫切換
ctrl + shift + U
#去掉沒有用到的包
ctrl + alt + o
查找類
#當前頁查找替換
ctrl + r
#全域查找替換
ctrl + shift + r
#查看介面的實作類
ctrl + alt + b
#查看類的所有方法
ctrl + F12
#搜索類
ctrl + n
#查找檔案
ctrl + shift + N
#選擇多個相同值
alt + j
#匯入包
alt + 回車
#上下移動
alt + shift + up/down
#格式化代碼
alt + ctrl + L
#洗掉行
ctrl + x
#復制行
ctrl +d
#單行注釋
ctrl + /
#多行注釋
ctrl + shift + /
#修改實體化名稱
shift + fn + f6
#調出環繞代碼如(surround with) try-catch
ctrl + atl + t
操作類
itar #生成array for代碼塊
iter #生成增強for
itli #生成list的遍歷
itve #生成Vector陣列迭代
itco #生成Collection迭代
iten #生成enumeration遍歷
itit #生成iterator迭代
ittok #生成String token遍歷
插件
#背景圖設定 view——>Set Background Image
background image plus
lombok
idea集成tomcat
idea集成tomcat步驟：
打開 run——> edit configurations
選擇 Tomcat Server——>Local
點擊 configure…
添加 tomcat 安裝路徑
打開最左邊加號 選擇tomcat安裝路徑
idea集成tomcat后控制臺輸出亂碼問題:
help——>Edit Custom VM Options
在最后行添加 -Dfile.encoding=UTF-8
file ——> Invalidate Caches / restart… 重啟idea
配置全域設定
file——>other Settings——>settings for new project
配置模板
file——>settings——>Editor——>file and code templates——>other
配置動態模板
file——>settings——>Editor——>Live Templates
//點擊加號選擇Template Group 模板組，給模板組取個名字
//在選中模板組名稱 點擊加號 點擊 Live Template
WebStorm
快捷鍵
編輯類
查找類
配置
屏蔽檔案及檔案夾
setting——>editor——>File Types
node_modules
去掉視圖中間的豎線
setting——>editor——>appearance
去掉勾 show hard wrap and visual guides
vscode
win10下控制臺受限
//查看控制臺權限
get-ExecutionPolicy
//受限制的
Restricted
//設定成遠程訪問
Set-ExecutionPolicy -Scope CurrentUser
//遠程簽名
RemoteSigned
快捷鍵
#塊注釋 Toggle Block Comment
alt + Shift + A
#單行注釋
ctrl + /
#向下復制行
alt + Shift + Down
#插入多個游標
alt + 點擊
#向上插入游標
ctrl + alt + Up
#向下插入游標
ctrl + alt + Down
#向下選中相同內容
ctrl + D
#向上移動行
alt + up
#自動換行
WordWrap 將off修改為on即可
搜索transform
transform to Lowercase 轉小寫 atl + shift + U
transform to Uppercase 轉大寫 ctrl + shift + U
配置
{
"git.ignoreMissingGitWarning": true,
"editor.fontSize": 16,
"sublimeTextKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
"editor.formatOnPaste": true,
"workbench.startupEditor": "newUntitledFile",
"editor.tabSize": 2,
// #每次保存的時候自動格式化
"editor.formatOnSave": false,
// #每次保存的時候將代碼按eslint格式進行修復
"eslint.autoFixOnSave": true,
// #ctrl+v之后不在格式化代碼
"editor.formatOnPaste":false,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉代碼結尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
// #讓函式(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.exclude": {
"**/.vscode": true,
"**/.idea": true,
"**/node_modules": true
},
"workbench.statusBar.visible": false,
// Link file types to the beautifier type
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue"
]
},
// Options for all default formatters
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue組件中html代碼格式化樣式
"wrap_attributes": "auto"
}
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js": "none",
// #配置縮進為2
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"workbench.iconTheme": "vscode-icons",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//結構{}不換行
"beautify.config": {
"brace_style": "collapse,preserve-inline"
}
}
插件
Settings Sync #vscode同步設定插件 需要登錄github 和token
#GLOBAL
#VUE
vue Extension pack #集成推薦vue相關插件
vetur #語法高亮、智能感知、Emmet等
VueHelper #vue代碼提示
Vue 2 Snippets #代碼片段提示
Vue peek #組件跳轉
Vue-beautify #vue格式化
Vue VSCode Snippets #
HTML Snippets #H5代碼片段以及提示
vscode-icon #讓 vscode 資源樹目錄加上圖示
Path Intellisense #路徑自動補全
ESLint #js語法檢查
JavaScript (ES6) code snippets #ES6的代碼片段
JavaScript Snippet Pack #ES5及以下的代碼片段
Pug(Jade)snippets #pug代碼提示
HTML CSS Support #智能提示當前專案所支持的樣式
jQuery Code Snippets #jquery代碼片段提示
HTMLHint #html代碼檢測
beautify #格式化代碼的工具
npm Intellisense #require 時的包提示
TSLint #TypeScript格式驗證工具
Bootstrap 3 Sinnpet #Bootstrap提示
Bracket Pair Colorizer #讓括號擁有獨立的顏色，易于區分
Import Cost #引入包大小計算
Angular Language Service #angular的語言服務
Reactjs code snippets #reactjs語法
Prettier - Code formatter #格式化插件
Live Server #服務插件
GraphQL #GraphQL語法插件
#小程式工具插件
wechat-snippet
代碼片段
Manage——>user snippets——>選擇語言
\n 換行
\t 縮進1個tab
模板變數
可以使用$name或者${name:default}的格式
$1 $2 表示游標的位置，按tab鍵跳轉,$0是最后一個
TM_SELECTED_TEXT 當前選中的文本或者空文本
TM_CURRENT_LINE 當前行的內容
TM_CURRENT_WORD 游標之后的文本或者空文本
TM_LINE_INDEX 上一行行號
TM_LINE_NUMBER 當前行號
TM_FILENAME 當前檔案名稱
TM_FILENAME_BASE 當前檔案名稱不帶后綴
TM_DIRECTORY 當前檔案的檔案夾
TM_FILEPATH 當前檔案的全路徑
CLIPBOARD 剪切板內容
#日期變數
CURRENT_YEAR 當前年份
CURRENT_YEAR_SHORT 當前年的最后兩個數字
CURRENT_MONTH 當月兩個數字 (如 ‘02’)
CURRENT_MONTH_NAME 當月的全稱 (如 ‘July’)
CURRENT_MONTH_NAME_SHORT 當月的簡稱 (如 ‘Jul’)
CURRENT_DATE 當日
CURRENT_DAY_NAME 周幾(如 ‘Monday’)
CURRENT_DAY_NAME_SHORT 周幾的簡稱 (如 ‘Mon’)
CURRENT_HOUR 當前24小時的時間
CURRENT_MINUTE 分鐘
CURRENT_SECOND 秒
vue
template
"Print to console": {
"prefix": "template",
"body": [
"<template>\n\t<div$1></div>\n</template>\n<script>\nexport default {\n\tdata(){",
"\t\treturn{\n\t\t\tmsg:''\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n\r</style>"
],
"description": "Log output to console"
}
html
htm
"Print to console": {
"prefix": "htm",
"body": [
"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>\n</head>\n<body>\n\r</body>\n</html>"
],
"description": "Log output to console"
}
js
log
"Print to console": {
"prefix": "log",
"body": [
"console.log($1);"
],
"description": "Log output to console"
}
react class
"Print to console": {
"prefix": "edc",
"body": [
"export default class $1 extends React.Component{\n\trender(){\n\t\treturn <div>$2</div>\n\t}\n}",
],
"description": "Log output to console"
}
chrome
#json試圖
JSONView
#瀏覽器版restful測驗工具
Talend API Tester
#查看github左選單
Octotree
#去除搜索引擎廣告
adblock plus
#二維碼生成器
二維碼(QR碼)生成器(QR Code Generator)
#Github 加速器
Github 加速器
#查看圖片
imagus
#web前端助手
web前端助手
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/223561.html
標籤：其他
下一篇：最全前端面試總結