Setting up Vim for React.js
来源:互联网 发布:java中的tag 编辑:程序博客网 时间:2024/06/17 03:02
Original blog: https://jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015
React.js is gaining a lot of traction lately, but developing with its inline-XML-in-JS requires a few tweaks to Vim for a smooth experience.
Syntax highlighting
To get the syntax highlighting to look right, use mxw’s Vim JSX highlighting.
If you use Vundle, add:
Plugin 'mxw/vim-jsx'
Other plugin loaders, see the GitHub page.
If you use JSX syntax in .js files, which is now becoming standard, add:
let g:jsx_ext_required = 0 " Allow JSX in normal JS files
to your vimrc.
Syntax checking
If you use Syntastic, you’ll notice immediate errors wherever XML nodes appear, which is to be expected. Here’s a work around.
Update 3/30/15: I’ve added instructions on using ESLint instead of the old wrapper package.
Install eslint, babel-eslint (for ES6 support), and eslint-plugin-react:
npm install -g eslintnpm install -g babel-eslintnpm install -g eslint-plugin-react
Create a config like this in your project’s .eslintrc
, or do so globally by placing it in ~/.eslintrc
:
{ "parser": "babel-eslint", "env": { "browser": true, "node": true }, "settings": { "ecmascript": 6, "jsx": true }, "plugins": [ "react" ], "rules": { "strict": 0, "quotes": 0, "no-unused-vars": 0, "camelcase": 0, "no-underscore-dangle": 0 }}
Finally, configure Syntastic to use ESLint:
let g:syntastic_javascript_checkers = ['eslint']
You should be good to go, and JSX with ES6 features will syntax check correctly! See this issue for more info.
- Setting up Vim for React.js
- Setting up VIM for Erlang TDD
- Setting up GlassFish for JMS
- Setting up J2ME development environment for Symbian
- Setting Up PayPal for your Magento Store
- Setting up a Device for Development
- Setting up SSH for a Hadoop cluster
- notes for setting up my new homepage
- Setting up a new Typescript 1.9 and React project
- react-native for mac path setting
- Setting up LaTeX for Windows 9x/NT/2000/XP
- Setting Up Visual C++ 6.0 for ADSI Development
- Setting up Jdeveloper 10.1.2 for iStore 11.5.10
- Setting up an Adobe writer for ABAP output
- Setting Up a Flash Recovery Area for RMAN
- Setting up the C++ Analyzer for MSVC++ 6.0
- Setting up compiler in Windows Eclipse for cpp
- (Visual Studio)Part 4: Setting up Code for the Debugger
- websocket PHP编程
- UI布局笔记
- Android主流HOOK框架介绍与应用--游戏破解游戏外挂的必杀技
- vs2013和IIS同步调试设定
- LeetCode-541. Reverse String II (Java)
- Setting up Vim for React.js
- Mysql单条查询性能剖析 show profile
- Jquery利用is(“:checked”)判断多选框是不是被选中
- 海纳百川、有容乃大
- LintCode-k数和
- Python笔记
- CentOS下安装JDK
- Hbase集群搭建
- SplitContainer 控件扩展之收缩面板