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前端助手