反応的なインポートを正しく注文するようにcocとnvimを設定する方法は?

反応的なインポートを正しく注文するようにcocとnvimを設定する方法は?

私は毎日cocでnvimを使用してVSコードよりも非常に効率的ですが、この順序でインポートするReactを使用するときに設定できないいくつかの作業がvscodeで行われます。

React(useState, useEffect, useRef) 依存関係 (momentjs, antd) 組み込み (私のコンポーネントは Component.tsx です)

私はcoc-eslint、coc-prettier、coc-tsserverを使っていくつかのアプローチを試しましたが、実際にはうまくいきませんでした。

CocCommand editor.action.organizeImportを試してみましたが、アルファベット順に並べ替えられます。 私のnvimの設定

set nocompatible
syntax enable
set colorcolumn=80
set updatetime=500
set relativenumber
set viminfo='1000
set tabstop=2
set shiftwidth=2
set expandtab
set completeopt=noinsert,menuone,noselect
set wildmenu
set ignorecase
set autoindent
let g:fzf_preview_command = 'bat --color=always --plain {-1}'
let let g:fzf_preview_git_files_command = 'fd .'
let g:fzf_preview_filelist_command = 'rg --files --hidden --follow --no-messages -g \!"* *"'

highlight ColorColumn ctermbg=0 guibg=lightgrey

call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'scrooloose/nerdtree'      " NERD Tree
Plug 'Xuyuanp/nerdtree-git-plugin'  " show git status in Nerd tree
Plug 'itchyny/lightline.vim'        " UI
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }


" Code {{{
Plug 'editorconfig/editorconfig-vim'
Plug 'maxmellon/vim-jsx-pretty'
Plug 'othree/html5.vim'
Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() }} " Markdown preview
"}}}

" GIT {{{
Plug 'tpope/vim-fugitive'
Plug 'airblade/vim-gitgutter'
" }}}
call plug#end()

let mapleader=" "
" by myself

"go to 
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
nmap <silent> gd <Plug>(coc-definition)

"search
map <leader>g :CocCommand fzf-preview.ProjectGrep
nnoremap <silent> <Leader>f :CocCommand fzf-preview.GitFiles<cr>
nnoremap <silent> <Leader>d :CocCommand fzf-preview.CocDefinition<cr>
nnoremap <silent> <Leader><F5> :CocCommand fzf-preview.CocDiagnostics<cr>
nnoremap <silent> <Leader><F7> :CocCommand fzf-preview.CocTypeDefinition<cr>
nnoremap <silent> <Leader><F6> :CocCommand fzf-preview.CocImplementations<cr>

"snippets 
inoremap <silent><expr> <TAB>
      \ coc#pum#visible() ? coc#_select_confirm() :
      \ coc#expandableOrJumpable() ? "\<C-r>=coc#rpc#request('doKeymap', ['snippets-expand-jump',''])\<CR>" :
      \ CheckBackspace() ? "\<TAB>" :
      \ coc#refresh()
function! CheckBackspace() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction

let g:coc_snippet_next = '<tab>'
" Use <C-j> for both expand and jump (make expand higher priority.)
imap <C-j> <Plug>(coc-snippets-expand-jump)

" Use <C-k> for jump to previous placeholder, it's default of coc.nvim
let g:coc_snippet_prev = '<c-k>'


"tabs & navigation  
map <leader>t gt<cr>
map <leader>n :tabnew<cr>
map <leader>m :tabmove
map <leader>c :close<CR>
map <leader><S-c> :tabclose<cr>
map <leader>o :tabonly<cr>

"common
noremap <Leader>l :nohl<CR>
noremap <Leader>s :vsp<CR>
map <leader>w :w<cr>
map <leader>y "+y<cr>
map <leader>p "+p<cr>
map <leader>r <C-w>w  

"autoindent - eslint - prettier 
command! -nargs=0 Prettier :call CocAction('runCommand', 'prettier.formatFile')
augroup Mygroup
  autocmd!
  autocmd FileType typescript,json setl formatexpr=CocAction('formatSelected')
  autocmd BufWritePre .ts,.js,.py,.rb,*.go silent! call CocAction('runCommand', 'editor.action.organizeImport')
  autocmd User CocJumpPlaceholder call CocActionAsync('showSignatureHelp')
augroup end

私の CocConfig

{
  "suggest.noselect": true,
  "javascript.updateImportsOnFileMove": "always",
  "javascript.suggestionActions.enabled": true,
  "javascript.implementationsCodeLens.enabled": true,
  "javascript.preferences.quoteStyle":"single",
  "javascript.suggest.autoImports": true,
  "tsserver.experimental.enableProjectDiagnostics": true,
  "typescript.suggest.autoImports": true,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
  "typescript.preferences.importModuleSpecifier": "shortest",
  "typescript.preferences.importModuleSpecifierEnding": "minimal",
  "snippets.ultisnips.pythonPrompt": false,
  "eslint.autoFixOnSave": true,
  "eslint.filetypes":["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "prettier.disableSuccessMessage": true,
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "tsserver.formatOnType": true,
  "coc.preferences.formatOnType": true
}

関連情報