jsx設置樣式的簡單介紹

本文目錄一覽：

• 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）