loading...

2

webstorm-技巧

其他读完大概需要20分钟

  • 发布时间:2017-08-06 13:38 星期日
  • 刘伟波
  • 459
  • 更新于2019-07-22 13:53 星期一

1.webstorm忽略node_modules目录


方法1.如下图所示(只对当前项目有效)

或者

如果要使用这种方法,一种是还没安装依赖的时候先创建node_modules目录然后打开webstorm设置好excluded再安装;另一种是已经安装了依赖了,则删除.idea目录重新打开webstorm,就可以选择node_modules设置excluded。 

 

 方法2:(全局有效)

 

如上图所示添加node_modules目录到忽略文件列表里面,点击应用就可以了。



2.注册码 2019-6-28 最新版 需要这样 https://blog.csdn.net/qq_40914991/article/details/85543575

2019-3-17(选中间的activetion code,能用到2099年,好用的话给点赏钱呗,破解不易)

4RULSIH54N-eyJsaWNlbnNlSWQiOiI0UlVMU0lINTROIiwibGljZW5zZWVOYW1lIjoiMjA5OSAxODExIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJBQyIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IkRQTiIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiR08iLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IkNMIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiUlMwIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiUkMiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJSRCIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IlBDIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiUk0iLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IkRCIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiREMiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJSU1UiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifV0sImhhc2giOiIxMTA3MzgwNy8wIiwiZ3JhY2VQZXJpb2REYXlzIjowLCJhdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlLCJpc0F1dG9Qcm9sb25nYXRlZCI6ZmFsc2V9-rlH9JbPzbld/Oak51Co3HlhD6xgE7CsvbrLl6RCySuv2sw37KBfDPY1PT2lAEkW0MJkUtGtmSHVp/jk8F4RuHGvouJFMdCtnsKdnebdjaPsKpjgxoreWlOu8VCnrGh 3mmuswzGKouw52ffxbmsvGFa5ybvWv7mj9gqSY0V20OcgCmIT3dlj4f9xc0iA9o7z1pvedVzcOrxVKvLmmqRp 4zMfNuMQB5sraznW9BxslR1sWN0pUOu9/J k7IH6Wld/oGv5dtHYFqk5RinSBMTjYlZ X4AV5f83Z4SkzbHqy2fGC6S3NoifaVFxRSP5TQDe6hsg7Fzic6k1iWAup89pg==-MIIElTCCAn2gAwIBAgIBCTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE4MTEwMTEyMjk0NloXDTIwMTEwMjEyMjk0NlowaDELMAkGA1UEBhMCQ1oxDjAMBgNVBAgMBU51c2xlMQ8wDQYDVQQHDAZQcmFndWUxGTAXBgNVBAoMEEpldEJyYWlucyBzLnIuby4xHTAbBgNVBAMMFHByb2QzeS1mcm9tLTIwMTgxMTAxMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5 07B8VEaIu7c3E1N e1doC6wht4I4 IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1 I4ZI FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQAF8uc YJOHHwOFcPzmbjcxNDuGoOUIP 2h1R75Lecswb7ru2LWWSUMtXVKQzChLNPn/72W0k oI056tgiwuG7M49LXp4zQVlQnFmWU1wwGvVhq5R63Rpjx1zjGUhcXgayu7 9zMUW596Lbomsg8qVve6euqsrFicYkIIuUu4zYPndJwfe0YkS5nY72SHnNdbPhEnN8wcB2Kz OIG0lih3yz5EqFhld03bGp222ZQCIghCTVL6QBNadGsiN/lWLl4JdR3lJkZzlpFdiHijoVRdWeSWqM4y0t23c92HXKrgppoSV18XMxrWVdoSM3nuMHwxGhFyde05OdDtLpCv jlWf5REAHHA201pAU6bJSZINyHDUTB Beo28rRXSwSh3OUIvYwKNVeoBY KwOJ7WnuTCUq1meE6GkKc4D/cXmgpOyW/1SmBz3XjVIi/zprZ0zf3qH5mkphtg6ksjKgKjmx1cXfZAAX6wcDBNaCL Ortep1Dh8xDUbqbBVNBL4jbiL3i3xsfNiyJgaZ5sX7i8tmStEpLbPwvHcByuf59qJhV/bZOl8KqJBETCDJcY6O2aqhTUy 9x93ThKs1GKrRPePrWPluud7ttlgtRveit/pcBrnQcXOl1rHq7ByB8CFAxNotRUYL9IF5n3wJOgkPojMy6jetQA5Ogc8Sm7RG6vg1yow==

4.配置babel


  1. npm安装babel
    npm install -g babel-cli

2.npm安装Babel的preset

npm install --save-dev babel-preset-es2015

3 工程路径新建.babelrc文件,内容如下

{
  "presets": [
    "es2015"
  ]
}

4 打开Preference->Tools->File Watcher->Babel,
如何没有,就点击下面 号,选择新建


Paste_Image.png


5 双击打开Babel,进行配置
重点是Watcher Seetings参数:

  • Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$


6 更改mac和window 的ctrl和command的烦恼 进入webstorm设置,选择keyup,选择mac os或者window




WebStorm那些事儿

http://tc9011.com/2017/01/16/WebStorm那些事儿/

  工具   2782

2017011662102017-01-16_20-00-06.png

关于webstorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

快捷键

代码注释

注释一行代码:ctrl /(windows)

​ command /(mac)

2017011662102017-01-16_20-00-06.png

注释大段代码:

1 ctrl /(windows)

command /(mac)

2017011662102017-01-16_20-00-06.png

2 ctrl shif /(windows)

shift command /(mac)

2017011662102017-01-16_20-00-06.png

格式化代码

格式化代码:ctrl alt L(windows)

​ option command L(mac)

2017011662102017-01-16_20-00-06.png

shift F6

shift F6(windows)

shift fn F6(mac)

1 替换局部变量

2017011662102017-01-16_20-00-06.png

2 重构函数名

2017011662102017-01-16_20-00-06.png

快速跳转

​ 快速跳转:ctrl 单击(windows)

​ command 单击(mac)

2017011662102017-01-16_20-00-06.png

删除代码

删除代码:ctrl Y(windows)

​ Command delete(mac)

2017011662102017-01-16_20-00-06.png

多行编辑

多行编辑:1 鼠标选择时按住alt(windows)

​ 鼠标按住时按住option(mac)

2017011662102017-01-16_20-00-06.png

​ 2 长按alt J,自动选择相同的元素(windows)

​ 选中元素后,按ctrl g(mac)

2017011662102017-01-16_20-00-06.png

zencoding

按tab键自动展开为完整html标签

2017011662102017-01-16_20-00-06.png

后代:>

2017011662102017-01-16_20-00-06.png

兄弟:

2017011662102017-01-16_20-00-06.png

上级:^

2017011662102017-01-16_20-00-07.gif

分组:()

2017011662102017-01-16_20-00-07.png

乘法:*

2017011662102017-01-16_20-00-07.png

自增符号:$

想显示几位数就使用几个$,$@-倒序,$@3从3开始计数

2017011662102017-01-16_20-00-07.png

ID和类属性:#和.

2017011662102017-01-16_20-00-07.png

自定义属性:[]

2017011662102017-01-16_20-00-07.png

文本:{}

2017011662102017-01-16_20-00-07.png

zencoding更多资料参见:zen coding 教程zen coding使用方法,大量实例Zen Coding: 一种快速编写HTML/CSS代码的方法

自定义模板

在setting>Editor>Live Templates中可以自定义模板,方便自己调用。

2017011662102017-01-16_20-00-07.png

2017011662102017-01-16_20-00-07.png

20170117806814.png

使用效果:

20170117806814.png

代码对比

不同文件代码对比

先把需要对比的代码复制到剪切板,然后右击有个compare with Clipboard,就会有个对话框弹出,里面标记了两个代码不同的地方。

20170117806814.png

相同文件历史代码对比

右击有个Local History,选择Show History

20170117806814.png




sass

2.设置webstorm打开WebStorm->preferences

3.搜索File Watchers

4.点击 号新建个scss进去里面修改Program:修改成第一步你查找到的地址

5.新建scss,你可以看到对应生成了css


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!