vuejsx無法編譯
① 如何優雅地使用 VSCode 來編輯 vue 文件
先來扒一扒使用 PHPStorm 遇到的問題：
vue文件雖然可以通過插件來解決高亮問題，但是 <script> 標簽中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 <style> 標簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標簽（自定義組件）和自定義屬性，會報一堆 warning
經常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制台中查看
如何安裝 vscode
很簡單，傳送門： 官網下載安裝
第一步，要支持 vue 文件的基本語法高亮
這里，我試過好3個插件： vue , VueHelper 和 vetur ，最終選擇使用 vetur 。
安裝插件： Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可。
p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成後還不用重啟整個程序，只要重新載入下工作區窗口就可以了。
安裝完 vetur 後還需要加上這樣一段配置下：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這時可以打開一個vue文件試試，注意下右下角狀態欄是否正確識別為 vue 類型：
如果被識別為 text 或 html ，則記得要點擊切換下。
第二步，要支持 vue 文件的 ESLint
可能還有人會問為什麼要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運行，但是 lint 作為編譯前的一道檢測成本更小，而且更快。此外， ESLint 還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。
jshint 本來也是個不錯的選擇，但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.
安裝插件： Ctrl + P 然後輸入 ext install eslint 然後回車點安裝即可。
ESLint 不是安裝後就可以用的，還需要一些環境和配置：
首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。
其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html 這個插件。可以使用 npm install -g eslint-plugin-html 來安裝
接著，安裝了 HTML 插件後，還需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最後，別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建，還可以使用下面快捷命令來創建：
這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。
要是不小心少個括弧之類的都可以有對應的報錯:
多餘 import 也都能報錯:
還是蠻智能的。
第三步，配置構建任務
vue 項目的構建我選擇用 webpack ，不過，並不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個，一個是 build/bin/build.js 另一個是 build/bin/watch.js 分別是單次構建和實時構建。
於是乎，對應 vscode 中的 tasks 也是有兩個： build 和 watch ，簡單配置如下：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
"version": "0.1.0",
"tasks": [
{
"taskName": "build",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/build.js"
],
"suppressTaskName": true,
"isBuildCommand": true
},
{
"taskName": "watch",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/watch.js"
],
"suppressTaskName": true,
"isBackground": true
}
]
}
這樣配置好後，按 Ctrl + Shift + B 即可開始單次構建。 不過單次構建比較慢（要10秒+），一般我都用實時構建： Ctrl + P 然後輸入 task watch <回車> 即可開始實時構建。實時構建除了第一次比較慢，其他時候還是非常快的，一般1秒內就可以構建好。
最後，webpack 構建錯誤提示
webpack 構建失敗後一般都會有錯誤提示，會顯示在輸出窗口中：
為啥是彩色的？ 因為裝了 Output Colorizer 這個插件。
當然，這樣還是不夠方便 -- 實時構建是後台運行的，「輸出」窗口一般也都是在後台，每次保存完文件還得點開豈不麻煩。
要是能做到像 ESLint 一樣直接把錯誤標到編輯器上面就好了。真的可以嗎？翻了下 vscode 的文檔，發現有神奇的 problemMatcher -- 可以對任務輸出進行解析，解析出的問題會顯示在「問題」窗口中，如果還有文件名行號和列號，則會在源代碼編輯窗口中對應的位置標出來。
先放個最終效果：
在這個文件的第32行，import 了一個不存在的模塊，這樣的錯誤在 ESLint 中當然是檢查不出來的，然而在 webpack 的實時構建中會報錯：
這個事情的困難在於兩點：
如何通過 problemMatcher 把這個錯誤給抓出來？
如何找到錯誤對應的行號？（如果可能的話，還有列號）
webpack的錯誤輸出格式並不是完全統一的，而且有些還沒有行號 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建，報錯的行號可能對不上。
最終我的解決方案是對 webpack 的錯誤重新格式化輸出，然後匹配：
首先，重新格式化輸出需要 format-webpack-stats-errors-warnings 這個包（偶新寫的）
npm install --save-dev format-webpack-stats-errors-warnings
然後，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增加這個格式化後的輸出：
更多使用介紹見 github
最後，在 .vscode/tasks.json 中，每個任務下添加 problemWatcher :
// ...
{
"taskName": "build",
// ...
// build 任務的:
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
}
}
}
{
"taskName": "watch",
// ...
// watch 任務的：
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^\\s*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
註：在 watch 任務中，為了匹配何時開始和何時結束，我在 webpack 構建的 run 和 watch 時增加了一個 console.log('Webpack begin run') 的列印，而在構建完成後增加了一個 console.log("Build complete at ..") 的列印。
② 最新react棄用了jsxtransformer了那jsx還能用嗎
最新react棄用了jsxtransformer了那jsx還能用
這個確實是網路就能解決的問題 補充下樓上的回答
在react 0.14前，瀏覽器端實現對jsx的編譯依賴jsxtransformer.js
在react 0.14後，這個依賴的庫改為browser.js
頁面script標簽的type也由text/jsx改為text/babel
但是以上只能用來測試學習react
生產環境需要藉助編譯工具事先將jsx編譯成js
對應的這個工具也由react-tool更換為babel
③ expected indentation of 2 space characters but found 0什麼意思
意思就是「預期有兩個字母的空白縮排，但並沒有。」，遇到這種問題，有兩個解決方案
手動在對應的位置加上兩個空格，如果解決不了看下面的方法
檢查一下你的編輯器是不是有自動格式化的功能，將這個功能禁用。
例如：我的編輯器就是vscode，我的插件是JS-CSS-HTML Formatter，直接禁用，然後在對應的代碼前面加上兩個空格鍵就好了。（最好使用空格鍵，不要用tab鍵）
去網上下載一個插件(wpy-beautify)，可以幫助格式化vue代碼。
④ 如何利用vscode編寫vue的簡單配置
vue文件雖然可以通過插件來解決高亮問題，但是 <script> 標簽中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 <style> 標簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標簽（自定義組件）和自定義屬性，會報一堆 warning
經常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制台中查看
⑤ 如何用 Bower 編譯 jsx
1.安裝node，因為ts的編譯器是js/ts寫的； 安裝node後同時獲得npm命令，這是nodejs世界裡的包管理器（也可以看作node的app商店）； 2.安裝vs 2015或者vs code，當然這不是必須的，但是這里強烈推薦寫ts的工具，vs第一，vsc第二； 3.vs自帶了Type...
⑥ 原來Babel 能直接編譯 JSX.官方用的是哪個
JavaScript 依賴於瀏覽器的運行環境。是一種解釋執行的腳本語言。
所以，只能以文本的形式被解釋執行，不能被編譯。
有些運行形式，比如.js .hta 的執行方式看似一個獨立的應用程序。其實後台也是解釋執行的。
⑦ 學react時使用jsx語法報錯怎麼辦
這個一般是代碼有錯誤，直接檢查語法錯誤！
React 代碼不是原生的 JavaScript, 而是 JSX, 跟 CoffeeScript 一樣要編譯. 搜一下 JSX 編譯.
嵌入jsx文件或代碼，需要指明type。
script type="text/jsx"
否則解析失敗.
⑧ vue jsx文件標簽里的 {...{ props }} 是能傳多個props參數嗎vue3.0似乎沒辦法這樣使用
傳遞不成功應該是 icon參數的問題，雖然組件上是可以同時有多個參數，但上面代碼的返回值里組件實際只會傳遞一個參數，...{ props }這個是 es6的解構語法，如果你不清楚什麼是解構，可以先搜索了解一下。
上面的 renderIcon函數最終實際返回的可能結果只有兩種情況，要麼返回
<Icon component=icon />
要麼返回
<Icon type=icon />
後面的 icon的具體值由傳入的參數決定。
也就是說，renderIcon的返回值中， Icon組件都只會有一個參數。
所以如果你的代碼執行不成功，應該檢查傳入的 icon參數是否合法，renderIcon函數本身應該是沒有問題的，也與升級版本無關，除非這個 icon參數是由其他模塊自動生成的，而且升級版本之後，傳入的 icon參數里的屬性名稱也跟著發生了變化，不再包含之前的 component或 type屬性。
⑨ VSC中js文件怎麼支持jsx語法
createElement(
'anchored-heading',{
props:{
level:1
}
},[
createElement('span','Hello'),
'world!'
]
)
渲染成下面這樣
<anchored-heading:level="1">
<span>Hello</span>world!
</anchored-heading>
.使用jsx語法
這就是會用到一個Babel plugin插件，用於在 Vue 中使用 JSX 語法的原因，它可以讓我們回到於更接近模板的語法上。
安裝
npminstall
babel-plugin-syntax-jsx
babel-plugin-transform-vue-jsx
babel-helper-vue-jsx-merge-props
babel-preset-es2015
--save-dev
2.編輯.babelrc文件
{
"presets":["es2015"],
"plugins":["transform-vue-jsx"]
}代碼編輯如下
Vue.component('jsx-example',{
render(h){//<--hmustbeinscope
return<divid="foo">bar</div>
}
})將 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在應用中會觸發報錯。
官網說明文檔：https://cn.vuejs.org/v2/guide/render-function.html#JSX