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