What IDE do you use for JS/HTML5 coding and why?

[errordronegames]

I currently use Sublime Text, which I like a lot, but some of the formatting when making new functions and smart indenting doesn't work like it should. I think I'm missing out on some useful Intellisense things for JS and its external libraries. What do you guys use?

 

edit: I would love to hear if other people use Sublime and have settings that work well for them (for instance, I turn off auto-complete braces so I don't have to always hit the arrow keys when I make a function)

[geeksesi::javad();]

i'm php dev more than html & js ...

i'm using sublime without a good auto complete ( just basics )

if anyone need a good feature and very good auto complete... i offer phpstorm or webstorm

and i think you forget to add emacs... i think it's a good editor ( with hard configuration and use )

[Wolfsbane]

Missing Panda2 on that list, from this forum's own@enpu ?

I'm using the Panda editor, because of the real time game display, and also some of the other built in features that make testing on mobile easier, etc. I should add I would only use it specifically for game deving.

Otherwise, Atom. It's a light text editor, but I can still have the 'project' folders/files on the side for easy navigation. (Notepad++ doesn't have).

Have used Eclipse for javascript a little(for Java projects) but the editor is too heavy for my liking for a pure javascript project. Or maybe that's just me.

[makis]

Jet brain unbeatable! 

[errordronegames]

 

3 hours ago, Wolfsbane said:

Missing Panda2 on that list, from this forum's own@enpu ?

I'm using the Panda editor, because of the real time game display, and also some of the other built in features that make testing on mobile easier, etc. I should add I would only use it specifically for game deving.

Otherwise, Atom. It's a light text editor, but I can still have the 'project' folders/files on the side for easy navigation. (Notepad++ doesn't have).

Have used Eclipse for javascript a little(for Java projects) but the editor is too heavy for my liking for a pure javascript project. Or maybe that's just me.

Oh wow! Panda looks really cool. The plus side is that it's perfect for gamedev, only downside is like you mentioned, anything that's not gamedev related would be better off done in a different text editor. That being said I'm a bit "tired" of Sublime. I like the fact that I can do project folders in Sublime, and I love the dark mode, but I really don't like the way it handles formatting, and the settings are a bit vague and hard to understand

edit: another things I'm wondering is how closely integrated the game engine is with the Panda editor. Do you need to code games using the engine to use it's features?

[Wolfsbane]

4 hours ago, errordronegames said:

edit: another things I'm wondering is how closely integrated the game engine is with the Panda editor. Do you need to code games using the engine to use it's features?

I think at the moment it's coupled a bit to the Panda engine.. but should be usable for other codes/engines. It's on the roadmap to export using other game engines in the next version.

 

[Bart Read]

I actually have been using VS Code a lot recently, and prefer it to Sublime Text, but have had to switch back to Sublime Text due to VS's Code Helper process rinsing my CPU, which drains the battery on my laptop at an absolutely brutal rate, and even on mains power eventually leads to everything else on the machine slowing down as multiple instances of Code Helper are spawned.

Sublime Text, although not as good as VS Code functionally, is still nice to use, fast, and lightweight, so switching back to it hasn't been too painful. If Microsoft fix the Code Helper process issues with VS Code I'll be going back to it though.

Whichever editor I'm using I pair it with four command line windows running bash:

• One for git, and manually running builds (although I also have a watch process): here I use gulp; I know webpack is the new hotness but gulp has served me well the past 3 years so I don't see any value in changing just for the sake of it
• One for running node
• One for running MongoDB
• And the final one for sshing into my server to kick off deployments, apply updates, and suchlike

 

[espace]

No one speak about vim ?

The best for me !!!! Light, huge list of plugins, speed coding, never bug.

[Milton]

I use vim for Haxe. But for Typescript with browser debugging/hot_reload VS Code seems better suited.

[espace]

Are you speaking about reload the page ?
if yes, I use  browser-sync when you save your files,  it automaticaly reload the page

browser-sync start --server --files "*/*.*"

https://browsersync.io/

 

[Milton]

Sure, but browser debugging doesn't work as flawlessly as it does in VS Code.
Obviously it can be made to work, but it's just too difficult.

[espace]

What are the benefits in vscode ? Could you give me theses special features ?

[Milton]

Well, in VS Code I just set a breakpoint and using either Chrome/Opera or VSCode  itself I step through my code (thanks to source maps).
Can't get Vim to do the same. And I have a quite impressive vimrc

[espace]

Okay, i use this function minder.

i give my vimrc, could you give your also, it could be interesting to discover new features

""interface
set encoding=utf8
set mouse=a
set noswapfile
set autoindent
set clipboard=unnamedplus
" recherche incrementielle
set incsearch
set cursorline
" insensible à la casse dans les recherches
set ignorecase
" insensible à la casse dans les chemins
set wildignorecase
"" true color
" vertical line to show position
set cursorcolumn
" always center cursor
set so=999

"autoindent
filetype indent on

" to center always the view
set so=999
" relative number
set number 
set relativenumber
" COLORS
set background=dark
colorscheme onedark
let g:AirlineTheme='base16_codeschool'
syntax on
set termguicolors
set guifont=fontAwesome:h9

" PERSONAL COMMAND
" open snippets for phaser in a vertical split
command Pref vsplit ~/.vim/plugged/vim-snippets/snippets/javascript/javascript-phaser.snippets
command Config vsplit ~/.config/nvim/init.vim

" CUSTOM KEYBINDING
"NORMAL MODE
nnoremap <C-Up> VDkPk <CR>
nnoremap <C-Down> VDjPj <CR>
nnoremap <C-a> ggVG <CR>
nnoremap <C-=> G=gg <CR>
map <F2> :TernDoc<CR>

"move between split
nnoremap <C-J> <C-W><C-J>
" grepper KEYBINDING
map <C-f> :Grepper<CR>
nmap gs  <plug>(GrepperOperator)
xmap gs  <plug>(GrepperOperator)

"INSERT MODE
inoremap <C-Space> <C-x><C-o>

" Plugins will be downloaded under the specified directory.
call plug#begin('$HOME/.vim/plugged')

if has('nvim')
	Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' }
else
	Plug 'Shougo/deoplete.nvim'
	Plug 'roxma/nvim-yarp'
	Plug 'roxma/vim-hug-neovim-rpc'
endif

" DECLARE THE LIST OF PLUGINS.
Plug 'ternjs/tern_for_vim'
Plug 'scrooloose/nerdtree'
Plug 'Raimondi/delimitMate'
Plug 'rhysd/github-complete.vim'
Plug 'easymotion/vim-easymotion'
Plug 'terryma/vim-multiple-cursors'
Plug 'vim-syntastic/syntastic'
Plug 'kien/ctrlp.vim'
Plug 'pangloss/vim-javascript'
Plug 'vim-scripts/indenthtml.vim'
Plug 'walm/jshint.vim'
Plug 'heavenshell/vim-jsdoc'
Plug 'ervandew/supertab'
Plug 'SirVer/ultisnips'
Plug 'honza/vim-snippets'
Plug 'ryanoasis/vim-devicons'
Plug 'mhinz/vim-grepper'
"Plug 'majutsushi/tagbar'
"" diagram uml
""Plug 'scrooloose/vim-slumlord'
Plug 'aklt/plantuml-syntax'
Plug 'tyru/open-browser.vim'
"" multiple cursors
Plug 'terryma/vim-multiple-cursors'
Plug 'vim-airline/vim-airline'
" Airlines THEMES
Plug 'vim-airline/vim-airline-themes'
" COLORS THEMES

Plug 'drewtempelmeyer/palenight.vim'
Plug 'thenewvu/vim-colors-sketching'
Plug 'tyrannicaltoucan/vim-deep-space'
"Plug 'joshdick/onedark.vim'

" List ends here. Plugins become visible to Vim after this call.
call plug#end()

" SUPERTAB
"scroll from top to bottom
"let g:SuperTabDefaultCompletionType = "<c-n>"

let g:python_host_prog  = '/usr/bin/python2.7'
let g:python3_host_prog  = '/usr/bin/python3.6'

"maybe to delete
noautocmd
"" start deoplete at startup
let g:deoplete#enable_at_startup = 1

set statusline+=%#warningmsg#
set statusline+=%*
"" disable autocomment when insert line
autocmd FileType * setlocal formatoptions-=c formatoptions-=r formatoptions-=o
" Automatically reload vimrc when it's saved

" autoreload vimrc
autocmd! BufWritePost init.vim,.vimrc source %

"" auto indent on save
augroup autoindent
	au!
	autocmd BufWritePre * :normal migg=G`i
augroup End

"" ignore file with ctrlp
set wildignore+=phaser.js,phaser-min.js    
"COMMANDES FOR SYNTASTIC
"let g:syntastic_always_populate_loc_list = 1
"let g:syntastic_auto_loc_list = 1
"let g:syntastic_check_on_open = 1
"let g:syntastic_check_on_wq = 0

" INTERESTING SHORTCUTS

" yi( copier à l'intérieur de la parenthèse
" ya( copier à toute la parenthèse

" Markdown
"sudo npm install -g livedown
"livedown start es.md --port 4242 --open"
nmap <leader>g :Grep <c-r>=expand("<cword>")<cr><cr>

 

[Milton]

I don't think it's useful to spew that garbage

I use Vundle for plugins, these are some of my favorites:

Plugin 'jdonaldson/vaxe'
Plugin 'Valloric/YouCompleteMe'
Plugin 'majutsushi/tagbar'
Plugin 'leafgarland/typescript-vim'
Plugin 'w0rp/ale'
Plugin 'Quramy/tsuquyomi'
Plugin 'Chiel92/vim-autoformat'

Mostly to get Haxe and Typescript completion and highlighting working.
Then there are ctag files (for the tagbar):

--langdef=haxe
--langmap=haxe:.hx
--regex-haxe=/^package[ \t]+([A-Za-z0-9_.]+)/\1/p,package/
--regex-haxe=/^[ \t]*[(@:macro|private|public|static|override|inline|dynamic)( \t)]*function[ \t]+([A-Za-z0-9_]+)/\1/f,function/
--regex-haxe=/^[ \t]*([private|public|static|protected|inline][ \t]*)+var[ \t]+([A-Za-z0-9_]+)/\2/v,variable/ 
--regex-haxe=/^[ \t]*package[ \t]*([A-Za-z0-9_]+)/\1/p,package/
--regex-haxe=/^[ \t]*(extern[ \t]*|@:native\([^)]*\)[ \t]*)*class[ \t]+([A-Za-z0-9_]+)[ \t]*[^\{]*/\2/c,class/
--regex-haxe=/^[ \t]*(extern[ \t]+)?interface[ \t]+([A-Za-z0-9_]+)/\2/i,interface/
--regex-haxe=/^[ \t]*typedef[ \t]+([A-Za-z0-9_]+)/\1/t,typedef/
--regex-haxe=/^[ \t]*enum[ \t]+([A-Za-z0-9_]+)/\1/t,typedef/
--regex-haxe=/^[ \t]*+([A-Za-z0-9_]+)(;|\([^)]*:[^)]*\))/\1/t,enum_field/
--langdef=typescript
--langmap=typescript:.ts
--regex-typescript=/^[ \t]*(export[ \t]+([a-z]+[ \t]+)?)?class[ \t]+([a-zA-Z0-9_$]+)/\3/c,classes/
--regex-typescript=/^[ \t]*(declare[ \t]+)?namespace[ \t]+([a-zA-Z0-9_$]+)/\2/c,modules/
--regex-typescript=/^[ \t]*(export[ \t]+)?module[ \t]+([a-zA-Z0-9_$]+)/\2/n,modules/
--regex-typescript=/^[ \t]*(export[ \t]+)?(async[ \t]+)?function[ \t]+([a-zA-Z0-9_$]+)/\3/f,functions/
--regex-typescript=/^[ \t]*export[ \t]+(var|let|const)[ \t]+([a-zA-Z0-9_$]+)/\2/v,variables/
--regex-typescript=/^[ \t]*(var|let|const)[ \t]+([a-zA-Z0-9_$]+)[ \t]*=[ \t]*function[ \t]*[*]?[ \t]*\(\)/\2/v,varlambdas/
--regex-typescript=/^[ \t]*(export[ \t]+)?(public|protected|private)[ \t]+(static[ \t]+)?(abstract[ \t]+)?(((get|set)[ \t]+)|(async[ \t]+[*]*[ \t]*))?([a-zA-Z1-9_$]+)/\9/m,members/
--regex-typescript=/^[ \t]*(export[ \t]+)?interface[ \t]+([a-zA-Z0-9_$]+)/\2/i,interfaces/
--regex-typescript=/^[ \t]*(export[ \t]+)?type[ \t]+([a-zA-Z0-9_$]+)/\2/t,types/
--regex-typescript=/^[ \t]*(export[ \t]+)?enum[ \t]+([a-zA-Z0-9_$]+)/\2/e,enums/
--regex-typescript=/^[ \t]*import[ \t]+([a-zA-Z0-9_$]+)/\1/I,imports/

and stuff like this:

let g:tagbar_type_typescript = {
    \ 'ctagstype' : 'typescript',
    \ 'kinds'     : [
      \ 'c:classes',
      \ 'a:abstract classes',
      \ 't:types',
      \ 'n:modules',
      \ 'f:functions',
      \ 'v:variables',
      \ 'l:varlambdas',
      \ 'm:members',
      \ 'i:interfaces',
      \ 'e:enums'
    \ ],
    \ 'sro'        : '.',
    \ 'kind2scope' : {
      \ 'c' : 'classes',
      \ 'a' : 'abstract classes',
      \ 't' : 'types',
      \ 'f' : 'functions',
      \ 'v' : 'variables',
      \ 'l' : 'varlambdas',
      \ 'm' : 'members',
      \ 'i' : 'interfaces',
      \ 'e' : 'enums'
    \ },
    \ 'scope2kind' : {
      \ 'classes'    : 'c',
      \ 'abstract classes'    : 'a',
      \ 'types'      : 't',
      \ 'functions'  : 'f',
      \ 'variables'  : 'v',
      \ 'varlambdas' : 'l',
      \ 'members'    : 'm',
      \ 'interfaces' : 'i',
      \ 'enums'      : 'e'
    \ }
\ }

 

All fun when you're configuring it, but a couple of years later it looks like complete gibberish...