React-Vim 开发环境

发表于 更新于

实现功能

  1. react 代码高亮、自动补全。
  2. 执行./node_modules/.bin/eslint --fix src/App.js 即可对App.js 进行代码错误检测和格式化。
  3. 变更代码自动对代码进行格式化。

换源

1
2
npm config set registry=http://registry.npmjs.org
npm config set disturl https://npm.taobao.org/dist

插件安装

建议使用 vim-plug 包管理器（安装方式）

1
vim ~./vimrc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
set nu!               " 显示行号
set hls               " 寻找时匹配高亮显示
syntax on             " 语法高亮
set background=dark
colorscheme solarized
set shiftwidth=2      " 设置格式化时代码缩进为2个空格
set tabstop=2         " tab键缩进为4格子
set expandtab         " tab键转换为空格
set incsearch         " 很聪明的查找,输入一个字符马上自动匹配,而不是输入完再查找
set ignorecase        " 搜索时大小写不敏感
set wildmenu          " vim 自身命令行模式智能补全
set ts=4              " 设置 tab 键为四个空格
set cindent           " 设置自动缩近
set shiftwidth=4      " 设置每一级缩进长度为4
set nocompatible      " 自动补全
set backspace=2       " 解决不能删除的问题

call plug#begin('~/.vim/plugged')
" react 插件
Plug 'pangloss/vim-javascript'
Plug 'mxw/vim-jsx'
Plug 'mattn/emmet-vim'
Plug 'w0rp/ale'
Plug 'skywind3000/asyncrun.vim'
call plug#end()

 " emmet-vim
 let g:user_emmet_leader_key='<C-e>'
 let g:user_emmet_jsx = 1

" react 自动格式化
autocmd BufWritePost *.js AsyncRun -post=checktime ./node_modules/.bin/eslint --fix %

依赖安装

以 create-react-app 为例

1
2
3
4
5
6
7
npx create-react-app create-react-app
cd create-react-app
./node_modules/.bin/eslint --init
# Use a popular style guide ——> Airbnb ——> y ——> JavaScript ——> n
npm install --save--dev eslint-config-airbnb
或：
yarn add --dev eslint-config-airbnb

修改 .eslintrc.js 配置

1
vim .eslintrc.js

覆盖原文本如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
    "root": true,
    "parserOptions": {
        "parser": 'babel-eslint',
         "sourceType": 'module'
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "eslint-config-airbnb",
    ],
    "plugins": [
        "react",
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/prefer-stateless-function": "off"
    },
};

相关链接

Setting up Vim for React development | Drivy Engineering
我花了两个月时间，定制出了心目中「完美」的 ESLint 规则，我用四个空格缩进 - 流浪小猫的博客