Category Archive 工具

By柏小白

webstorm功能、操作技巧及快捷键索引

欲先善其事,必先利其器,如题。看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom)

我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能。换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件。

那么接下来开始介绍webstrom的特色功能:

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具
  1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的。
    好处:省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。
    坏处:没有以前的 * 标识,万一键盘误操作也会被立即存储。
  2. 任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有。 vcs->Local History -> Show History(快捷键:ALT+~ -〉7)
    好处:只要webstorm不关闭,你的文件随时可以返回到之前的操作(这也是为啥在 webstorm 里ctrl+y是删除一行的原因了)。
    坏处:webstorm关闭重启后这些历史记录就没有了;还有一个坏处就是由此带来的内存消耗也必然比较大。
  3. 任何一个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供一个本地文件修改历史记录(快捷键:ALT+SHIFT+c)。也可以 Ctrl + E 弹出最近打开的文件。
    好处:相当于本地svn。
    坏处:内存消耗也必然比较大。
  4. 集成了zencoding,html5,ftp,即时编辑(chrome),自动完成,基于Mozilla的JavaScript调试器,JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn版本控制等特性。
  5. 在编写CSS中,会智能的提示各种文件以及图片的路径,就不用再去确认这个文件是否存在了。

其他的特性就介绍了,想了解更多可以去webstrom官网继续寻找。看完了这么介绍以及那么多给力的特性,是不是有种冲动马上试一试这款传说中的前端神器啊?嗯。

首先在官方下载页下载webstrom后,点击安装,然后一直下一步,最后会出现需要注册码界面,因为webstrom是商业的IDE,而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了,不用担心,我们可以用WebStorm的密钥来学习使用这款前端神器。嘿嘿~~~~

安装成功后,肯定会有些不适,就像我一样觉得这配色真的太戳了。还有一些设置也不是我也要的。那么以下我就列出我习惯的设置。

webstorm安装后的一些设置技巧:

  • 如何更改主题(字体&配色):
    File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址
  • 如何让webstorm启动的时候不打开工程文件:
    File -> Settings->General去掉Reopen last project on startup.
  • 如何完美显示中文:
    File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12
  • 如何显示行号:
    File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了
  • 如何代码自动换行:
    File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了
  • 如何点击光标,显示在本行末尾:
    File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
  • 如何修改快键键:
    File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作
  • 换成自己熟悉编辑器的快键键:
    File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。
  • javascript类库提示。
    File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了.
  • 在开发js时发现,需要ctrl + return 才能选候选项:
    File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always”
  • js提示比较迟缓
    File -> Code Completion -> Autopopup in 下 1000改为0
  • git配置:
    File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要.
  • 插件安装:
    File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。)
  • 以后更新

webstorm使用心得

  • 收藏夹功能:
    当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单
  • 面包屑导航:
    除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用.
  • 构造器界面:
    注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.
  • todo界面:
    给代码加todo注释就会出现这个界面
  • 双栏代码界面:
    右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)
  • 本地历史功能:
    找回代码的好办法

git使用

webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。

  • 查看当前代码与版本库代码的差异:
    右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。

webstorm的快捷键说明:

Editing编辑相关快捷键

  • Ctrl + Space:
    Basic code completion (the name of any class, method or variable) 基本代码完成(任何类、函数或者变量名称),改为Alt+S
  • Ctrl + Shift + Enter:
    Complete statement 补全当前语句
  • Ctrl + P:
    Parameter info (within method call arguments) 参数信息 包括方法调用参数
  • Ctrl + mouse over code
    Brief Info 简单信息
  • Ctrl + F1
    Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息
  • Alt + Insert
    Generate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法
  • Ctrl + O
    Override methods 重载方法
  • Ctrl + I
    Implement methods 实现方法
  • Ctrl + Alt + T
    Surround with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)
  • Ctrl + /
    Comment/uncomment with line comment 行注释/取消行注释
  • Ctrl + Shift + /
    Comment/uncomment with block comment 块注释/取消块注释
  • Ctrl + W
    Select successively increasing code blocks 选择代码块,一般是增量选择
  • Ctrl + Shift + W
    Decrease current selection to previous state 上个快捷键的回退,减量选择代码
  • Alt + Q
    Context info 上下文信息
  • Alt + Enter
    Show intention actions and quick-fixes 意图行动,快速见效
  • Ctrl + Alt + L
    Reformat code 根据模板格式对代码格式化
  • Tab/ Shift + Tab
    Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理
  • Ctrl + X or Shift + Delete
    Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板
  • Ctrl + C or Ctrl + Insert
    Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板
  • Ctrl + V or Shift + Insert
    Paste from clipboard 粘贴剪切板上的内容
  • Ctrl + Shift + V
    Paste from recent buffers 粘贴缓冲器中最新的内容
  • Ctrl + D
    Duplicate current line or selected block 复制当前行或者所选代码块
  • Ctrl + Y
    Delete line at caret 删除光标所在位置行
  • Ctrl + Shift + J
    Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)
  • Ctrl + Enter
    Smart line split(HTML and JavaScript only)分离智能行 (HTML 和JavaScript)
  • Shift + Enter
    Start new line 另起一行
  • Ctrl + Shift + U
    Toggle case for word at caret or selected block 光标所在位置大小写转换
  • Ctrl + Shift + ]/[
    Select till code block end/start 选择直到代码块结束/开始
  • Ctrl + Delete
    Delete to word end 删除文字结束
  • Ctrl + Backspace
    Delete to word start 删除文字开始
  • Ctrl + NumPad+/-
    Expand/collapse code block 扩展/缩减代码块
  • Ctrl + Shift+ NumPad+
    Expand all 扩张所有
  • Ctrl + Shift+ NumPad-
    Collapse 缩减所有
  • Ctrl + F4
    Close active editor tab 关闭活跃编辑标签

Search/replace搜索/替代相关快捷键

  • Ctrl + F
    Find 当前文件内快速查找代码
  • Ctrl + Shift + F
    Find in path 指定文件内寻找路径
  • F3
    Find next 查找下一个
  • Shift + F3
    Find previous 查找上一个
  • Ctrl + R
    Replace 当前文件内代码替代
  • Ctrl + Shift + R
    Replace in path 指定文件内代码批量替代

Usage Search搜索相关快捷键

  • Alt + F7/Ctrl + F7
    Find usages/Find usages in file 找到使用/在文件找到使用
  • Ctrl + Shift + F7
    Highlight usages in file文件中精彩使用
  • Ctrl + Alt + F7
    Show usages 显示使用

Running运行

  • Alt + Shift + F10
    Select configuration and run 选择构架,运行
  • Alt + Shift + F9
    Select configuration and debug 选择构架,修补漏洞
  • Shift + F10
    Run 运行
  • Shift + F9
    Debug 修补漏洞
  • Ctrl + Shift + F10
    Run context configuration from editor 从编辑运行内容构架
  • Ctrl + Shift + X
    Run command line 运行命令行

Debugging Debugging相关快捷键

  • F8
    Step over 不进入函数
  • F7
    Step into 单步执行
  • Shift + F7
    Smart step into 智能单步执行
  • Shift + F8
    Step out 跳出
  • Alt + F9
    Run to cursor 运行到光标处
  • Alt+ F8
    Evaluate expression 评估表达
  • F9
    Resume program 重新开始程序
  • Ctrl + F8
    Toggle breakpoint 切换断点
  • Ctrl + Shift + F8
    View breakpoints 查看断点

Navigation 定位相关快捷键

  • Ctrl + N
    Go to class跳转到指定类
  • Ctrl + Shift + N
    Go to file 通过文件名快速查找工程内的文件
  • Ctrl + Alt +Shift + N
    Go to symbol 通过一个字符查找函数位置
  • Alt + Right/ left
    Go to next/ previous editor tab 进入下一个/ 上一个编辑器选项
  • F12
    Go back to previous tool window 进入上一个工具窗口
  • Esc
    Go to editor(from tool window) 从工具窗口进入编辑器
  • Shift + Esc
    Hide active or last active window 隐藏活动窗口
  • Ctrl + Shift + F4
    Close active run/message/find/…tab 关闭活动….标签
  • Ctrl + G
    Go to line 跳转到第几行
  • Ctrl + E
    Recent files popup 弹出最近打开的文件
  • Ctrl + Alt + Left/Right
    Navigate back/forward 导航前进/后退
  • Ctrl + Shift + Backspace
    Navigate to last edit location 向最近编辑定位导航
  • Alt + F1
    Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置
  • Ctrl + B or Ctrl + Click
    Go to declaration跳转到定义处
  • Ctrl + Alt + B
    Go to implementation(s) 跳转方法实现处
  • Ctrl + Shift + B
    Go to type declaration 跳转方法定义处
  • Ctrl + Shift + I
    Open quick definition lookup 打开定义快速查找
  • Ctrl + U
    Go to super-method/super-class 跳转方法/超阶级
  • Alt + Up/Down
    Go to previous/next method 在方法间快速移动定位
  • Ctrl + ]/[
    Move to code block end/start 跳转到编码块结束/开始
  • Ctrl + F12
    File structure popup 文件结构弹出
  • Ctrl + H
    Type hierarchy 类型层次
  • Ctrl + Alt + H
    Call hierarchy 调用层次结构
  • F2/ Shift + F2
    Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。
  • F4/Ctrl + Enter
    Edit source/ View source 编辑源代码/查看源代码
  • Alt + Home
    Show navigation bar 显示导航栏
  • F11
    Toggle bookmark 切换标记
  • Ctrl + F11
    Toggle bookmark with mnemonic 采用记忆切换标记
  • Ctrl + #[0-9]
    Go to numbered bookmark 跳转到带编号的标记
  • Shift + F11
    Show bookmark 显示标记

Refactoring 重构相关快捷键

  • F5
    Copy 拷贝
  • F6
    Move 移动
  • Alt + Delete
    Safe Delete 安全删除
  • Shift + F6
    Rename 重新命名
  • Ctrl + Alt + N
    Inline Variable 嵌入变量
  • Ctrl + Alt + M
    Extract Method( Javascript only) 提取函数
  • Ctrl + Alt + V
    Introduce Variable 引入变量
  • Ctrl + Alt + F
    Introduce Field 引入域
  • Ctrl + Alt + C
    Introduce Constant 引入常量

VCS/Local History 版本控制系统/ 本地历史相关快捷键

  • Alt + BackQuote( )
    ‘VCS’quick popup 快速弹出 VCS
  • Ctrl + K
    Commit project to VCS 提交项目至VCS
  • Ctrl + T
    Update project from VCS 从VCS 更新项目
  • Alt + Shift + C
    View recent changes 查看最新改变

General 常用的相关快捷键

  • Ctrl + Shift +A
    Find action 查找并调用编辑器的功能
  • Alt + #[0-9]
    Open corresponding tool window 快速切换打开界面模块
  • Ctrl + Alt + F11
    Toggle full screen mode 切换全屏模式
  • Ctrl + Shift + F12
    Toggle maximizing editor 切换最大化编辑器
  • Alt + Shift + F
    Add to Favorites 将当前文件添至收藏夹
  • Alt + Shift + I
    Inspect current file with current profile 使用当前属性检查当前文件
  • Ctrl + BackQuote( )
    Quick switch current scheme 快速转换现有组合
  • Ctrl + Alt + S
    Open setting dialog 打开设置对话框
  • Ctrl + Tab
    Switch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)

我把以上快捷做成pdf了,大家可以点击WebStorm.快捷键pdf分享

文章内容转载于http://www.html5jscss.com/ide-webstrom.html

By柏小白

vue 常用方法

vue 获取元素高度
<div ref="elememt" >
</div>

//获取高度值
var height= this.$refs.text.offsetHeight; //100
//获取元素样式值,element 为元素ref="element"
var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px
// var heightCss =this.$refs.element.offsetHeight;  //100 不带px
//获取元素内联样式值
var heightStyle =this.$refs.element.style.height; // 100px
By柏小白

JS正则大全

2019年JS正则大全(常用)

来源: any86.github.io/any-rule/

24小时制时间(HH:mm:ss)

/^((?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$)/

12小时制时间(hh:mm:ss)

/^(1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/

base64格式

/^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i

数字/货币金额(支持负数、千分位分隔符)

/(^[-]?[1-9]\d{0,2}($|(,\d{3})*($|(\.\d{1,2}$))))|((^[0](\.\d{1,2})?)|(^[-][0]\.\d{1,2}))$/

数字/货币金额 (只支持正数、不支持校验千分位分隔符)

/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/

银行卡号(16或19位)

/^([1-9]{1})(\d{15}|\d{18})$/

中文姓名

/^([\u4e00-\u9fa5·]{2,10})$/

新能源车牌号

/[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/

非新能源车牌号

/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

车牌号(新能源+非新能源)

/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/

URL链接(网址)

/^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(\/\w\.-]*)*\/?/

手机号(严谨), 根据工信部2019年最新公布的手机号段

/^1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/

手机号(宽松), 只要是13,14,15,16,17,18,19开头即可

/^1[3-9]\d{9}$/

手机号(最宽松), 只要是1开头即可, 如果你的手机号是用来接收短信, 优先建议选择这一条

/^1\d{10}$/

日期, 如: 2000-01-01或2000-1-1

/^\d{4}(-)([0-1][0-2]|\d)\1([0-2]\d|\d|30|31)$/

email地址

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

国内座机电话,如: 0341-86091234

/\d{3}-\d{8}|\d{4}-\d{7}/

一代身份证号(15位数字)

/^\d{8}(0\d|11|12)([0-2]\d|30|31)\d{3}$/

二代身份证号(18位数字),最后一位是校验位,可能为数字或字符X

/^\d{6}(18|19|20)\d{2}(0\d|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/

身份证号, 支持1/2代(15位/18位数字)

/(^\d{8}(0\d|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/

帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线组合

/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/

纯中文/汉字

/^[\u4E00-\u9FA5]+$/

是否小数

/^\d+\.\d+$/

电话(座机)

/^0\d{2,3}-\d{7,8}$/

纯数字

/^\d{1,}$/

是否html标签

/<(.*)>.*<\/\1>|<(.*) \/>/

是否qq号格式正确

/^[1-9][0-9]{4,10}$/

是否由数字和字母组成

/^[A-Za-z0-9]+$/

纯英文字母

/^[a-zA-Z]+$/

纯小写英文字母组成

/^[a-z]+$/

纯大写英文字母

/^[A-Z]+$/

密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符

/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/

用户名正则,4到16位(字母,数字,下划线,减号)

/^[a-zA-Z0-9_-]{4,16}$/

ipv4地址正则

/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

16进制颜色

/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

微信号,6至20位,以字母开头,字母,数字,减号,下划线

/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/

中国邮政编码

/^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/

只包含中文和数字

/^(([\u4E00-\u9FA5])|(\d))+$/

非字母

/[^A-Za-z]$/
By柏小白

nginx配置ssl证书实现https访问

一.已签发的证书,下载 签发SSL证书自行google

二.

下载的文件有两个:

1,214292799730473.pem  或者 214292799730473.crt

2,214292799730473.key

三.

配置ca证书

1,nginx的安装目录为:/etc/nginx/。进入目录,增加cert/文件夹,把刚刚下载的两个文件上传到cert/文件夹中。

2,在/etc/nginx/vhost/下,增加web.xn--w0sz4as21fs7k.com.com文件。内容如下:

说明:下面的配置是对443端口和80端口进行监听,443端口要启用ssl。监听443端口的server配置可以仿照上面ca认证页面的nginx配置示例进行配置。

root节点笔者创建了一个web.xn--w0sz4as21fs7k.com/的文件夹,专门存放来自这个域名的请求以示区分。

server {
listen 443;
server_name web.xn--w0sz4as21fs7k.com; // 你的域名
ssl on;
root /var/www/web.xn--w0sz4as21fs7k.com; // 前台文件存放文件夹,可改成别的
index index.html index.htm;// 上面配置的文件夹里面的index.html
ssl_certificate cert/98989898989.pem;// 改成你的证书的名字
ssl_certificate_key cert/98989898989.key;// 你的证书的名字
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
index index.html index.htm;
}
}
server {
listen 80;

# 你的域名
server_name web.xn--w0sz4as21fs7k.com;

# 把http的域名请求转成https
rewrite ^(.*)$ https://$host$1 permanent;
}

By柏小白

webstorm关闭eslint检测

vue项目已经设置关闭eslint,但是代码还是很多标红线的地方,原因是webstorm这个ide默认启用了eslint,可以在设置中关闭

1558082214(1)

By柏小白

webstorm通过sftp修改本地文件 直接上传到服务器上

在开发中需要修改本地环境文件 保持ctrl+s保存 直接上传到服务器上 下面是具体步骤

Tools–Deployment–Configuration 这时候Upload to等都是灰色的

1

打开之后设置

添加个服务 左侧绿色加号 添加 这时候会选择类型 SFTP 用的centos,windows就是ftp。填写服务名称 我写的home,然后确定下面的 ,填写具体的地址

  • SFTP host : 服务器IP地址域名
  • Port : 端口号
  • Root Path : 找到服务器上的需要的文件夹
  • User name:用户名 一般都是root
  • Password :密码 这里后面打勾 保持密码 Save password
  • 填写正确后测试下Test SFTP connection 成功后就可以使用
  • Web server root URL : 访问的地址 这里根据服务器的IP来访问 Open 下看是否正确打开

2

测试连接是否成功:Test Connection

3

配置ctl+s保存上传文件

Tools–Deployment–Options

5

如下选项需要更改

  • Upload changed files automatically to the default server 这里选择 On explicit save action (Ctrl + S)
  • Upload external changes 这里勾选
  • Override default permissions on files 权限777 或者775
  • Override default permissions on folders 权限775

4

如下图的配置 确定后就可以看到,打开相应的服务器文件

6

直接修改文件ctrl+s保存到服务器上

7