Abrimos Atom.
luego entramos a Preferencias presionando
Ctrl + ,
ahi dentro vamos a la parte instalar o install si esta en ingles y
buscamos e instalamos los siguientes paquetes
emmet (Atajos del teclado y ayuda en general para desarrollo web)
color-picker (para elegir colores)
browser-plus (navegador en el editor para no ir a chrome)
atom-html-preview (vista previa de html en el editor)
es6-javascript (te ayuda a escribir codigo js)
file-icons (mejora los iconos segun su extension)
ident-guide-improved (guia para visualizar la indentacion del codigo)
language-vue (detecta componentes de vue )
language-pug (detecta el lenguaje pug lo vas a necesitar mas adelante)
pug (te ayuda a escribir codigo en pug)
vuejs2-snippets (te ayuda a escribir codigo en vuejs)
Bueno gente y acá les dejo un pequeño aporte para configurar su Atom y facilitar la deteccion de errores en tiempo real
ESLINT + ATOM + .VUE
buscamos e instalamos el siguiente paquete en nuestro Atom:
linteren la esquina superior derecha les van a salir 2 carteles para instalar las dependencias de linter, le dan SI o YES
en caso de que no les salga ningun cartel, los paquetes son los siguientes
linter-ui-default
busy-signalinstalamos el ultimo paquete para que el linter use eslint
linter-eslint
una vez instalado le hacemos click a las Preferencias(Settings) de este paquete
y le damos a check a donde dice Lint HTML Files
les debe quedar asi: ☑ Lint HTML Files
LISTO Ahora cuando escriben codigo en los archivos .vue Atom les avisara si tienen error
si sigue sin funcionar recuerden tener instalado en la carpeta del proyecto
npm i -D eslint-plugin-htmly crear un archivo llamado .eslintrc y dentro agregar lo siguiente y guardar
"plugins": ['html']
