0%

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 规则,我用四个空格缩进 - 流浪小猫的博客