winney

常用快捷键 大牛在用

格式化代码

1

Shift + Alt + F

代码缩进

选中代码段之后

1、向左

1

shift + TAB 

2、向右：

1

TAB

更换主题

1

Ctrl + K + T

VSCode搜索指定某个目录下查找文件

1. 先点击选中这个要查找的目录。
2. 右键点击后，点击里面的「Find in Folder」即 在文件夹中查找…..

将VSCode设置成中文语言环境

快速在浏览器中打开

1. 安装open in browser插件
2. 重新启动VSCode
3. 快捷键：Alt + B

使用sublime快捷键

安装插件：Sublime Text Keymap and Settings Importer

自动换行

https://jingyan.baidu.com/article/6f2f55a14ba6e3b5b93e6cd6.html

https://jingyan.baidu.com/article/6dad5075383c3fa123e36ec3.html

VSCode编辑器字体大小设置

“settings”——“文本编辑器”——常用设置——Editor：Font Size（这里设置为20）

VSCode如何用浏览器预览运行html文件

在”扩展“中搜索”view in browser“——右键点击html文件，选择View In Browser

view in browser已废弃， 换成”open in browser”

VSCode 编写Vue项目安装Vetur插件实现 代码高亮

VSCode中配置Vue3 + TS 的用户代码片段

设置——配置用户代码片段——新建代码片段——代码片段文件名（输入该快捷键生成代码片段–例如：vue3）

输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
	"vue-template": {
		"prefix": "vue3",
		"body": [
		"<template>",
		"",
		"</template>",
		"",
		"<script setup lang='ts'>",
		"",
		"</script>",
		"",
		"<style lang='less' scoped>",
		"",
		"</style>",
		],
		"description": "my vue3 template"
	}
}

使用方法：

在新建的.vue文件中，输入’vue3‘，即可快速生成以下代码：

1
2
3
4
5
6
7
8
9
10
11

<template>

</template>

<script setup lang='ts'>

</script>

<style lang='less' scoped>

</style>

插件

• open in browser：在默认浏览器打开

• CodeGeeX

• Vetur插件

AI自动代码补全插件

Tabnine

tabnine官网

Tabnine AI Autocomplete

TabNine-GitHub

WebStorm10

WebStorm是最专业的前端IDE开发工具

WebStorm配置和快捷键

Atom_工具使用

由github发布的前端开发工具

非常强大和非常开发的开发工具平台

• 官网地址: https://atom.io/
• 百度网盘下载地址：http://pan.baidu.com/s/1ntszCgT

Atom的插件和主题安装和配置

登录云服务器：

1

ssh user@server_ip

将 user 替换为您的用户名，server_ip 替换为服务器的 IP 地址或主机名。

复制文件到云服务器：

1

scp local_file user@server_ip:remote_path

将 local_file 替换为本地文件路径，user 替换为您的用户名，server_ip 替换为服务器的 IP 地址或主机名，remote_path 替换为服务器上的目标路径。

从云服务器复制文件到本地：

1

scp user@server_ip:remote_file local_path

将 user 替换为您的用户名，server_ip 替换为服务器的 IP 地址或主机名，remote_file 替换为服务器上的源文件路径，local_path 替换为本地目标路径。

上传文件到云存储（如 AWS S3 或腾讯云 COS）：

1

aws s3 cp local_file s3://bucket_name/remote_path

或

1

coscmd upload local_file remote_path bucket_name

这些命令将本地文件上传到云存储桶（bucket）中

下载云存储中的文件到本地：

1

aws s3 cp s3://bucket_name/remote_file local_path

或

1

coscmd download bucket_name remote_file local_path

查看服务器状态：

1

systemctl status service_name

将 service_name 替换为您要查看状态的服务名称，例如 nginx、apache2 等。

启动、停止或重启服务：

1
2
3

sudo systemctl start service_name
sudo systemctl stop service_name
sudo systemctl restart service_name

查看服务器资源使用情况：

1

top

查找文件所在位置：

1

locate 文件名

修改了nginx的配置：

1. 确保配置语法没有错误：sudo nginx -t

   1 2 3

   [root@VM-8-7-centos private]# sudo nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

2. nginx -s reload
   

   Nginx 服务器 SSL 证书安装部署

有缓存，需要等半个小时以上

使用window.open(url, ‘_self’)导出表格

使用window.open(url, ‘_self’)导出表格后，页面会刷新，本来存放的localStorage会被清（因为刷新页面做了清空表格筛选条件和页码）

1
2
3
4
5
6
7
8

// 监听手动刷新页面事件(按浏览器的刷新按钮||使用js方法刷新页面)
window.onbeforeunload = function(event){
    // 清空表格缓存的页码数据
    removeItem("pages");
    // 清空表格筛选条件缓存数据
    removeItem("formData");
    console.log('刷新了页面')
};

解决方法：使用sessionStorage临时缓存一份

1
2
3
4
5
6
7

// 在导出表格前，先临时拷贝localStorage缓存数据到sessionStorage
// 使用window.open导出表格，会将localStorage中的formData清空
sessionStorage.setItem('formData', JSON.stringify(getItem('formData')));
sessionStorage.setItem('pages', JSON.stringify(getItem('pages')));
// 导出表格后，从sessionStorage中拷贝数据再次缓存到locaStorage
setItem('formData', sessionStorage.getItem('formData'));
setItem('pages', sessionStorage.getItem('pages'));

通过url导出服务器端文件

1
2
3

// window.location.href= url;
// 或
window.open(url, '_self')