本文目录一览：

• 1、使用VSCode编写jsx代码时如何实现标签自动
• 2、如何用 React Native 创建一个iOS APP
• 3、react中怎么设置在触发某个事件的时候组件发生样式的改变
• 4、有哪些用 JavaScript 实现的图形库
• 5、[转载]如何使用PS调片动作---atn文件，jsx文件-脚本编
• 6、webstorm中怎么让.vue文件render中的JSX高亮

使用VSCode编写jsx代码时如何实现标签自动

VSCode是kiddd最喜欢的编辑器，极简而灵活，丰富而且继续丰富着的插件库，配置简单，都吸引着我。众所周知，VSCode在编写HTML代码时可以tab键自动补齐标签。然而在编写.jsx文件的代码时，嵌套的标签就无法享用一键补齐的优待了。

当然，如果这点问题不能解决，VSCode也不能在现代编译器中脱颖而出了。这里kiddd就介绍一种简单的实现方法，你不需要下载任何插件。

1. 打开设置

打开：文件——首选项——设置

2. 修改”emmet.triggerExpansionOnTab”属性

打开设置后搜索”emmet.triggerExpansionOnTab”属性，将其修改为false。 

修改的方式是：点击该语句左侧的笔状图标，或直接在右侧输入：

“emmet.triggerExpansionOnTab”: false 

over,搞定，配置完之后你就可以在jsx文件中tab补齐标签了。是不是非常简单？开始你的react之旅吧。

如何用 React Native 创建一个iOS APP

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发

iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React

一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native

把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook

在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。

下面，我们可以尝试用React Native创建一个 iOS APP.

在我们开始之前，我建议：你可以在 Github

里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的

APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native

替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建

UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。

首先，我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。

推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。

在Mac下，如果用homebrew，那么只用一行就可以装好:

brew install node

接下来安装watchman

brew install watchman

watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.

接下来安装 npm

npm install -g react-native-cli

nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。

在终端，找到你希望保存的项目文件，然后运行下面的文件夹。

react-native init BookSearch

以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode

的BookSearch.xcodeproj

并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址

JavaScript 的应用程序。



终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（我们将看看这个版本）和 JavaScript 代码。

运行这个 APP,你可以看到下图中的模拟器，如果你想在开发运行有几个步骤，你应该这样做。

欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你创建项目时生成的 index.ios.js 文件，如果您更改

JavaScript 代码，重新加载命令应用程序 Command-R 看到的变化，如果你想要更多的选择，使用命令控制

Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。

在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消

息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在

Xcode

中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果你的应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该

怎么做。

如果你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware Keyboard Connect Hardware Keyboard.

如果你按上边程序做了它依然不能重新加载，那么你可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。

我们现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用

Xcode，但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的

JavaScript IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX

的那真很不错。

当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。

'use strict'

以上代码启用了严格的模式，增加了处理原生 JavaScript 代码对错误的改善。

var React = require('react-native');

以上代码可以加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。

var { AppRegistry, StyleSheet, Text,

View,

} = React;

上面是一个解构赋值，你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果你不用它，那么每次你使用

一个组件在你代码中时，你就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」

、「React.StyleSheet」 而不能用「StyleSheet」 等等。

var BookSearch = React.createClass({

render: function() {

return (

View style={styles.container}

Text style={styles.welcome}

Welcome to React Native!

/Text

Text style={styles.instructions}

To get started, edit index.ios.js

/Text

Text style={styles.instructions}

Press Cmd+R to reload,{'\n'}

Cmd+Control+Z for dev menu

/Text

/View

);

}

});

上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用

JSX（JavaScript语法扩展）来构建应用程序的 UI。如果您以前使用过 XML（甚至HTML），JSX

就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应，你可以使用纯

JavaScript，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

});

上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用

CSS 样式应用程序的UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:

style={style.container}设置样式定义容器的外部视图包含其他UI组件。

上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用

CSS 样式应用程序的 UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:

style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。

react中怎么设置在触发某个事件的时候组件发生样式的改变

React的组件式开发，让我们可以利用其ComponentModel，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loaderstyle-loaderextract-text-webpack-plugin。正在使用的方式我们理想中的文件结构可能会是这样的：-components-modal-modal.jsx-modal.css//可以是任意预处理器-dropdown-dropdown.jsx-dropdown.css然而，js现在可以做模块化，css并不行，所有css的定义都可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其他组件，于是我们可以通过命名约定（nameconvention）来曲线救国（这一点并不局限于react开发）。@modal-prefix:modal;.@{modal-prefix}{}.@{modal-prefix}-title{}类似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽量避免命名冲突的可能。于是在组件中就可以这样做importReactfrom'react';import'./modal.less';exportdefaultReact.createClass({render(){returnHello;}});上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用react开发项目，也会用类似的方式）。CSSinJS之前看到过一个ppt：/css-modules/webpack-demo写在最后的话目前的探索结果暂时是这样，之后可能会继续来填坑。反正现在应该不会去用CSSinJS，CSSModules可以一试，因为css-loader这个插件基本react的项目里都会使用，写好的组件一个import，样式和组件都有了，不过仍需实践。

有哪些用 JavaScript 实现的图形库

JS图形、图标库推荐：

1. JS Charts

JS Charts 是个基于JavaScript的图表生成器，不需要任何编码。JS Charts 非常容易使用，只要用户使用客户端脚本（比如，在 web 浏览器中执行）。它不需要多余的插件和服务器模块，只需要下载 JS Charts 的脚本，准备好 XML，JSON 或者 JavaScript 数组数据。

2. Canvasjs

CanvasJS 是个易用的 HTML5 JavaScript 图表库，基于 Canvas 元素。Graphs 可以通过设备渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允许用户创建适用于所有设备，不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级，漂亮和响应式的仪表图。

3. Chart.js

Chart.js 是个简单的，面向对象的客户端图形库，用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的，完全自定义，而且看起来非常好看，即使在 retina 显示。它使用 HTML5 canvas 元素，支持所有现代浏览器，并且支持 IE7/8。

4. Aristochart

Aristochart 是个高度自定义，灵活的折线 Canvas 图表库，允许用户集中精力在图表的审美方面，后台工作做得非常好。Aristochart 有个持续进步的社区，提供许多不断增长的主题给用户选择。

5. xCharts

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。

6. BonsaiJS

BonsaiJS 是个轻量级的 JavaScript图形库，提供直观的图形 API 和 SVG 渲染器。主要特性包括：架构分离的运行器和渲染器；iFrame，Worker 和 Node 运行上下文；形状，路径，Assets（音频，图像，字体，subMovies），Keyframe 和常规动画，等等。支持现代化浏览器： Safari, Chrome 和 Firefox。

7. Sigma.js

Sigma.js 是个免费开源的 JavaScript图形库，使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。

8. Morris.js

Morris.js 是个轻量级的 JavaScript库，使用 jQuery 和 Raphaenuml 来绘制时序图。 Morris.js 生命周期是从代码驱动 howmanyleft.co.uk 图表开始的。它支持的浏览器有： IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一个函数： Morris.Line(选项)，包括了许多配置选项。

9. Paper.js

Paper.js 是一个开源的向量图形脚本框架，基于 HTML5Canvas 开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。

10. AmCharts

AmCharts 是个高级图表库，适用于所有数据的可视化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。

11. Smoothie Charts

Smoothie Charts是个极小的图表库，专为实时流媒体数据设计的。Joe Walnes 想展示 WebSocket推动的实时的流数据。虽然很多图表库允许用户动态更新数据，但是没有一个是可以优化源源不断的流数据。

12. Dygraphs

Dygraphs 是个快速，灵活，开源的 JavaScript 图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表；可以修改数值或者点击条目来调整平均周期。

13. Grafico

Grafico 是 Grafico 是一个基于 Raphaël 和 Prototype.js 构建的 JavaScript 图表库，提供了各种图表类型。这些漂亮的图表，有利于传递他们的信息。

14. Highchart JS

Highcharts JS 是一个制作图表的纯 Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE 和火狐等等；对个人用户完全免 费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是 PHP、Asp.net 还是 Java 都可以使用。

15. Flotr

Flotr 是一个基于 Prototype 开发的 JavaScript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。

16. Flot

Flot 是受 Plotr 和 PlotKit 的 启发，Ole Laursen 基于 jquery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

17. jFreeChart

JFreeChart 主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久，而且有大量的开发者在维护。

18. Plotkit

PlotKit 是一个纯 JavaScript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档，方便用户使用。

19. Planetary.js

Planetary.js 是个令人称奇的创建交互式 web 地球仪的 JavaScript库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构，甚至默认自身就是个插件！这使得 Planetary.js 非常灵活，而且它是允许用户完全自定义，包括颜色，大小，rotation 等等。更重要的是，用户可以在任意位置使用自定义的颜色和大小来显示动画“pings”；它还支持鼠标拖动和缩放，100% 免费和开源。

20. Ember Charts

Ember Charts 是个图表库，使用 Ember.js 和 d3.js 框架构建的。它包括时间线，条形图，饼图和散点图，非常容易扩展和修改。这些图表组件都是开箱即用的，在图表交互和演示方面应用的很好。

21. Sparky

Sparky 是个免费的 JavaScript 波形图库，依赖于 Raphaël ，非常容易使用。支持多个图表类型（折线，条形，area），折线和区域图可以有多个颜色选择。

22. Envision.js

Envision.js 是个 JavaScript 库，用来简化，快速创建交互式的 HTML5 可视化图表。它包括两个图表类型：时序图和 Finance ，提供 API 给开发者，用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关，依赖于几个小的 JavaScript 库。

23. Dc.js

dc.js 是个 JavaScript 图表库，有着原生的 crossfilter， 支持和允许高效展示大型多维数据集（基于 crossfilter 的示例）；图表使用 dc.js 渲染，是使用原生数据驱动，所以能得到用户的实时反馈；dc.js 最大的亮点在于能提供一个简单而强大的 JavaScript 库，能进行数据可视化和分析；不仅支持桌面浏览器还支持移动端。

24. ElyCharts

Elycharts 是一个易于使用的，可定制的 JavaScript图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括：line, column, are, bar, pie, sparklines and combinations。它支持多种交互式功能包括：鼠标跟踪、事件处理、利用各种动画高亮显示选择中的区域，Tooltip，HTML锚点等。可以动 态修改数据，并以漂亮的动画效果展示图表中的变化。图表利用SVG/VML技术生成，基于jQuery + Raphaël开发。

25. AwesomeChartJS

AwesomeChartJS Awesome Chart JS 是一个 JavaScript生成图表的类库，它利用了 HTML5 的 canvas 标签来创建统计图表。此类库就是为了减轻开发者的工作量，使用它只需书写几行代码便能生成漂亮的图表。

26. Arbor.js

Arbor.js 是一个利用 Web Works 和 jQuery创建的可视化图形库，它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。

27. CanvasXpress

canvasXpress 是一个基于HTML5 canvas标签实现的 JavaScript图表类库，它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。它所生成的图表交互性很强，鼠标放 上去时会动态显示值。除此之外，它也具有相当高的可定制性，可设置图表的文字、颜色和要显示/隐藏的元素等。当然更重要的一点是，虽然它使用了 HTML5，但是依然支持IE6浏览器。

28. JSXGraph

JSXGraph 是一个支持各种浏览器的交互式几何图库绘制。JSXGraph 使用 SVG 和 VML。

29. Rickshaw

Rickshaw 是一个用于绘制时序图的简单 jS 库，基于 Mike Bostock’s delightful D3 库构建。

30. rGraph

RGraph 是基于HTML5 canvas标签的HTML5 canvas图形库，支持 20 种不同的可视化类型。使用 canvas 标签，RGraph 创建“HTML5 图表”，意味着更快的 web 页面加载和更少的 web 服务器加载。这能帮助减小 web 页面的大小，低能耗和更快的浏览速度。

31. Fusion Chart

FusionCharts Suite XT 是个专业的 JavaScript图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的 legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。

32. Graph Dracula

Dracula 是用一系列的工具来显示和布局互动图表，包括各种相关的算法。它只是纯 JavaScript 和 SVG ，并无 Flash，Java，其他插件。它非常容易使用，用户可以很简单的自定义任意的元素。

33. Bluff

Bluff 是个 JavaScript 的 Ruby 的 Gruff graphing library端口。它支持所有 Gruff 的特性，但是有着最小的依赖。用户只需要运行一个第三方脚本： JS.Class 副本(压缩后只有 2.6kB ) 和 Google 的 ExCanvas 副本，用来支持 IE 中的 canvas。这两个脚本在 Bluff 中都有下载。Bluff 自身压缩后大小大概有 11KB 。

34. Pizza Pie Chart

Pizza Pie Charts 是个响应式饼图图表，基于 Adobe Snap SVG 框架，通过 HTML 标记和 CSS 来替代 JavaScript 对象，更容易集成各种先进的技术。

35. jGraph

HTML5 图表组件，完全支持l IE 6-8 和触屏设备。 JGraph 自2001年来就一直提供最先进的图表软件组件，是第一个流行的 JGraph Swing 库。然后在 2005 年走在时代的前沿开发 mxGraph。

[转载]如何使用PS调片动作---atn文件，jsx文件-脚本编

Frames.atn是PHOTOSHOP里的“画框”动作集，PHOTOSHOP预设的很多，可另下载也可自己录制添加新的动作，中文版PHOTOSHOP里"画框.atn" 举例，一键盛夏变金秋装载步骤：

1.首先调出动作面板：窗口--显示动作

2.装载"画框"动作集：点击动作面板右上角（关闭按钮下面）带箭头小圆按钮，出现菜单

3.选择菜单中"画框.atn"装载画框动作到动作面板

4.使用时注意去掉不想应用的动作指令前的小勾（比如固定的默认动作和画框集中不用的动作）

如果对动作不熟最好不播放动作（拉开该动作查看详细步骤能得更多启发）创意也更自由点 动作一般来说只是针对简单的批量处理JSX文件的用法在Photoshop中给图片加上EXIF信息的方法：先将本文件解压至Photoshop的安装目录，如： C:Program FilesAdobeAdobe Photoshop CS5PresetsScripts下，重启Photoshop。在“文件”-“脚本”下可以看到这个选项，打开照片，运行这个选项即可

Adobe Photoshop最强有力的工具之一根本不是图像编辑工具，而是“脚本”（Actions）功能。该功能的使用方法其实很简单，但遗憾的是，Photoshop的新用户很少有人知道这一功能的存在，甚至把它闲置不用。Photoshop的新用户都非常急于立即开始进行编辑，因此他们仅仅使用最基本的编辑工具，并且努力学习该软件的大量功能。借助于教学材料和提示信息，经过反复试验摸索，他们对程序越来越精通。这时，这些用户就开始使用插件滤镜了，以得到更丰富的效果。市场上有许多这样的滤镜，从互联网上也可以免费下载一些。这些滤镜有各种各样的控制参数，允许你调节滤镜的作用效果。一些滤镜专门用于文件的压缩，另一些滤镜可以为文本对象制作特殊效果，还有一些滤镜可以为整幅图制作特殊效果。问题是"要想制作某种效果，可能需要多个步骤。除非你做大量的笔记，或者记忆力极好，否则，再次重复某种效果几乎是不可能的。这时，就需要使用到“脚本”（Actions）功能了。它位于Photoshop主界面的顶端的下拉窗口中。“脚本”程序的工作方式与文字处理软件中的“宏”一样。“宏”是被录制在文件中的一系列功能的组合，可以通过热键来启动。 “脚本”可以将Photoshop的编辑工具和插件滤镜组合在一个文件中，并只需点击一次鼠标即可启动。在这些“脚本”中，有些能够实现50多项功能，使用了多个插件滤镜，并加入了几十个参数。即便你能够记住实现某种效果的方法，但要想每次都把各个功能中的参数选正确就不是一件容易的事情。在这方面，“脚本”为你节省了大量时间。

“脚本”主要用于重复性的任务或用于制作非常复杂的特殊效果。要建立一个新的“脚本”，只需单击“新脚本”（New Action）按钮。此时，有一个红色的方框表示当前处于录制脚本的状态。当你运行完所有的功能或插件后，停止录制就可以了。每一个“脚本”都有一个特定的名字，并被添加到脚本清单中。下一次当你想再使用上述组合效果时，只需启动这一“脚本”，所有的效果就会自动加载给图像。为了帮助你更好地理解“脚本”，我们以编辑照片为例把“脚本”的使用方法介绍一下。其中大部分方法都是反复试验摸索而得到的，最终把这些方法存储为“脚本”。我们将先执行一些重复性的任务，然后再制作更复杂的“脚本”。减轻颗粒 当你处理一幅用感光速度较高的胶片拍摄的照片时，就可以使用“减轻颗粒脚本”（Grain Rediuction）。这一脚本先使用了去斑点滤镜（Despeckle），然后又使用了锐化滤镜（Sharpen）。虽然前一个滤镜能够去除大量的颗粒，但却会同时将图像变模糊。因此，还需要再使用锐化滤镜。这样，图像清晰如初，但颗粒现象却减轻了。文件的转换 你需要使用的另一个脚本即所谓“MacTiff 脚本”。我们平时都使用PC机编辑图像，而我们与之打交道的大多数杂志社却都使用Mac 机。当我们把一篇文章中的所有图像都制作好后，需要使用“批处理脚本”对一组图像进行处理。此时，你只须坐在那里，看着这个脚本打开一幅幅图像，将其转换成Tiff文件，再将其设置成Mac格式，最后保存并关闭它们。谁说PC和Mac势不两立呢？ 当我们需要将大量的图像出售给其他公司用于制作教学CD时，可以使用一个专门制作的脚本。这个脚本可以将大量图像的尺寸减少到其原来的25%，再将它们锐化，最后将它们转换成为Mac的Tiff文件。这一脚本能够轻松地将数据总量超过650MB的多个文件处理成一套新的CD图像。在脚本工作的时候，你就有时间去做其他事情了。在脚本菜单中，还有几个版本的JPEG、Wavelet、Fractal等压缩设置。当你归档保存图像时，可以打开批处理脚本并开始转换过程。这样就无需使用单独的文件转换软件来转换文件了，而是可以一直在Photoshop中工作（一些文件转换软件并不完全与Photoshop兼容，对于Tiff文件尤其如此）。颜色-Gamma值校正 有时，一批图像会带有相同和色偏倾向或不良的反差状况，这通常是由于扫描质量或胶片的显示加工质量不好而造成的。由于这一批图像有着共同的缺点，你就可以建立一个专门的脚本，一次完成对它们的修整。调出第一幅图像，并录制对它的修整过程。当完成所有修整操作后，停止录制，它就会被保存在脚本菜单中了。然后，选择批处理脚本，并将刚刚制作好的脚本应用于所有的图像。于是，所有的图像转瞬间就都象第一幅图像那样得到了修整。如果以后再遇到相似的情况，甚至可以跳过制作脚本的步骤，而直接对待处理的图像使用该脚本。缩略预览图标 其他程序所制作出的图像可能没有缩略预览图标。为了避免猜测图像的内容，可以使用“缩略图标脚本”。这一脚本可以把一组文件打开，并将它们存储在一个复制目录中。当所有的图像都已转存一遍，且缩略图标都已形成，就可以安全地删除第一个目录了。有时，直立的图像可能会被横向放置。此时，再使用第二个脚本，把这些文件打开，待旋转后再次存储就可以了。内存控制 Adobe Photoshop允许你撤消先前的操作。当你对一幅图像进行操作时，Photoshop会在内存中保存关于图层、剪切板和滤镜的先前状态，以防你想撤消一步操作。如果你同时编辑多幅图像，计算机的内存就会不够用，因而需要把数据暂时转移到硬盘中。这样，系统的运行速度就会降低。清空内存需要多个步骤。当你编辑图像时，可以利用特定的脚本自动清空内存。该脚本的工作速度非常快，可以使你的工作速度总是保持最快。特殊效果 插件滤镜的组合可以制作霓虹灯文本、透视效果的阴影、爆炸物体、变幻莫测的背景图案以及其他许多效果，从而扩展了你的创造潜力。学习制作这些效果的方法的最好途径是上网，并以“Photoshop脚本”为关键词进行搜索。大量的网站都提供Photoshop插件、滤镜和脚本。其中一些产品是短期测试版，一些是免费的。它们的最大优点是文件数据量非常小，你可以在不到一小时的时间里下载十多个这类产品。

webstorm中怎么让.vue文件render中的JSX高亮

旧设置：Javascript version为 ECAMScript 6已经装过IDEA的vue插件 .vue文件如果不用JSX写法都是正常的但用JSX后就报红新设置：1、Javascript version为 ReactJSX （如果没有，就JSX Harmony）2、HTML 类型文件中增加 vue方法如下：1、preferences - Editor - File Types 中找到上边框中HTML 在下边加一个 *.vue2、preferences - Languages Frameworks - JavaScript 中 Javascript version为 ReactJSX （如果没有，就JSX Harmony）