Cómo usar VSCode para editar archivos vue con elegancia
Aunque los archivos vue se pueden resaltar mediante complementos, siempre es difícil identificar el código ES6 en scriptgt; La función de flecha a veces se puede reconocer correctamente, pero a veces se informará un error
La sintaxis jsx en el archivo vue no se puede reconocer correctamente
El archivo vue no se puede reconocer ni resaltar correctamente lt; stylegt; usado en etiquetas La parte menos sintaxis
Vue file usa muchas etiquetas personalizadas (componentes personalizados) y propiedades personalizadas, y reportará un montón de advertencias
<. p>a menudo se atasca "javascriptreact","html",
"vue"
],
"eslint.options ": {
"plugins":["html"]
},
Finalmente, no olvides crear el archivo .eslintrc.json en el directorio raíz del proyecto, si aún no lo ha creado, puede usar el siguiente acceso directo para crear:
De esta manera, el código js escrito en vue también se puede colorear correctamente.
Si accidentalmente omites un corchete o algo así, es posible que obtengas un error:
Incluso con una importación adicional, es posible que obtengas un error:
Esto es muy inteligente.
Paso 3: Configurar la tarea de compilación
Elegí usar webpack para construir mi proyecto vue, pero no usé webpack directamente desde la línea de comando, sino que usé la API de webpack para escribir un script de nodo. Hay dos scripts principales: build/bin/build.js y build/bin/watch.js, que se utilizan para compilaciones individuales y compilaciones en tiempo real, respectivamente.
Por lo tanto, hay dos tareas correspondientes en vscode: compilar y observar, configuradas de la siguiente manera:
{
// Para obtener documentación sobre las tareas, consulte/ fwlink/?LinkId=733558
//.
formato task.json //Utilice `Ctrl P` y escriba `task` SPACE lt;taskNamegt para ejecutar una tarea
"version":"0.1.0",
" tareas":[
{
"taskName": "build",
"echoCommand": true,
"command" :" nodo",
"args":[
"build/bin/build.js"
],
" suprimirTaskName" : verdadero,
"isBuildCommand": verdadero
},
{
"taskName": "ver",
"echoCommand": verdadero,
"command": "nodo",
"args": [
"build/bin /watch .js"
],
"suppressTaskName": verdadero,
"isBackground": verdadero
}
]
}
Después de esta configuración, presione Ctrl Shift B para iniciar una sola compilación. Sin embargo, una sola compilación es lenta (más de 10 segundos), por lo que normalmente uso una compilación en vivo: Ctrl P, luego ingreso la observación de tareas
Finalmente, el mensaje de error de compilación de Webpack
Cuando falla la compilación de Webpack, generalmente aparece un mensaje de error que se muestra en la ventana de salida:
¿Por qué? ¿de colores? Esto se debe a que el complemento Output Colorizer está instalado.
Por supuesto, esto es un inconveniente: la compilación en vivo se ejecuta en segundo plano y la ventana de Salida generalmente también está en segundo plano, por lo que tener que abrirla cada vez que guardas un archivo no es una gran tarea. trato.
Sería bueno si pudieras marcar errores directamente en el editor como lo hace ESLint. ¿Es esto realmente posible? Mientras revisaba la documentación de vscode, descubrí el sorprendente problemaMatcher: una forma de analizar el resultado de la tarea y mostrar el problema analizado en la ventana Problemas; si está presente, se marcarán con los números de fila y columna del nombre de archivo en la ubicación correspondiente del editor de código fuente. ventana.
Primero el resultado final:
En la línea 32 del archivo, se importa un módulo inexistente, que por supuesto no está marcado en ESLint, pero en tiempo real del paquete web era reportado como un error durante la compilación:
Hay dos dificultades con este problema:
¿Cómo detectar este error a través de problemMatcher?
¿Cómo encontrar el número de línea correspondiente al error? (También incluya números de columna si es posible)
El formato de salida de errores de Webpack no está completamente estandarizado y algunos de los errores no tienen números de línea; por un lado, esto puede ser un error en Webpack, por el otro. Por otro lado, los archivos vue se crean como plantillas, scripts y archivos de estilo, y los números de línea pueden no ser consistentes.
Finalmente, el número de línea no existe.
Al final, mi solución fue reformatear la salida del error de Webpack y hacerla coincidir:
Primero, para reformatear la salida, necesitas usar el paquete format-webpack- stats-errors-warnings (esto es nuevo para mí)
npm install --save-dev format-webpack-stats-errors-warnings
Luego, ve a build /bin/ build.js y build/bin/watch.js, y agregue esta salida formateada a la función de devolución de llamada de finalización de compilación del paquete web:
Para obtener más información sobre el uso de la salida formateada, consulte github
Finalmente , en .vscode/tasks.json, agregue problemWatcher debajo de cada tarea:
// ...
{
"taskName": "build",
// ...
// Tarea de compilación:
"problemMatcher": {
"owner":"webpack" ,
"fileLocation":[
"relative",
"${ workspaceRoot}"
],
"patrón": {
"regexp": "^! gt; (\w ): (\S )? : (\\ d ), (\\d )(? :~ (? : (\\\d ),)?(\\\d ))?: (. *)$",
"severidad" : 1,
"archivo ": 2,
"línea": 3,
"columna": 4,
" endLine": 5,
"endColumn": 6,
"Mensaje": 7
}
}
}
}
{
"taskName": "watch",
// ...
//Tareas de seguimiento:
"problemMatcher":{
"owner":"webpack",
"fileLocation":[
"relative",
"${ workspaceRoot}"
],
"pattern": {
"regexp": "^! gt; (\w ): (\S )? : (\\d ), (\\d )(? :~(? : (\\\d ),)?(\ \\d ))?: (. *)$" ,
"severidad": 1,
"archivo": 2,
"línea" : 3,
"columna" : 4,
"endLine": 5,
"endColumn": 6,
" Mensaje": 7
},
"Watch": {
"activeOnStart": true,
"beginsPattern":" ^\s*Webpack comienza a ejecutarse",
"endsPattern": "^\s*Compilación completa en",
"endsP
attern": "^\s s*Compilación completa en"
}
}
}
// ...
}
// ...
Nota: En la tarea de monitoreo, para hacer coincidir las horas de inicio y finalización, agregué al ejecutar y monitorear el Webpack build Una impresión de console.log('Webpack start run') y agregó una impresión de console.log("Compilación completa en ...") cuando se completa la compilación