Grabe varios complementos front-end de uso común
1 par de soportes para colorear.
Agregue un toque de color brillante a los corchetes {[()]} en el código , para que sea mucho más fácil encontrar los corchetes correspondientes y hará que el código sea más fácil de leer.
2 Formateador de código Prettier
Complemento de formato, esto puede formatear el código con un clic, muy fragante.
Después de la instalación, debe configurar los parámetros de formato:
el ícono de configuración en la esquina inferior izquierda de VSCode – “Configuración –” busque configuraciones en el cuadro de entrada y haga clic en una
/* prettier的配置 */
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false,
"terminal.integrated.allowMnemonics": true,
"terminal.integrated.automationShell.linux": "" // 不让prettier使用tslint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔
Después de escribir el código, use alt+shift+f para formatear el código con un clic
3 paquetes de idioma chino (simplificado) para Visual Studio Code
vscode de sinización
4 Vistazo de CSS
Encuentre rápidamente el
archivo 1.HTML de definición CSS, mantenga presionada la tecla CTRL y mueva el mouse a la clase para ver el estilo para ver la definición de la clase.
Mantenga presionada la tecla Ctrl y coloque el mouse sobre él. Se mostrará el estilo CSS invocado
2. Vaya a la definición del estilo, mantenga presionada la tecla CTRL y haga clic en el nombre de la clase de estilo al mismo tiempo o presione la tecla F12 en el nombre de la clase para saltar a la definición del estilo CSS Peek ahorra mucho tiempo en la búsqueda de estilos durante el desarrollo front-end
5 Fragmento de código ES7 React/Redux/GraphQL/React-Native
Reaccione: genere rápidamente bloques de código
Genere rápidamente los bloques de código correspondientes ingresando algunas abreviaturas
como imr→ import React from 'react'. Todavía es bueno después de que te acostumbras
6 Etiqueta de cierre automático
Autocompletar etiquetas de cierre
7 Etiqueta de cambio de nombre automático
Cambiar automáticamente el nombre de las etiquetas de cierre
8 cualquier regla
Complemento regular, puede encontrar algunos regulares comunes
9 ES Lint
Una herramienta de detección de código javascript que puede hacer que su código sea más estandarizado
10 GitLens — Git supercargado
Use el complemento esencial de git en vscode, que es muy poderoso
gráfico de 11 git
Puede realizar la gestión de versiones, como extracción, inserción, comparación de modificaciones, registro, combinación
12 git historia
Puede elegir ver el registro del archivo en el menú emergente del botón derecho, que es diferente del registro de la sucursal.
También puede ver el historial de una determinada línea.
13 git culpa
Puede verificar rápidamente quién, cuándo y cuándo se realizó la modificación más reciente de una fila
14 Abrir en navegador
Dado que VSCode no proporciona una interfaz integrada para abrir archivos directamente en el navegador, este complemento agrega la opción de ver archivos en el navegador predeterminado y la opción de abrir el panel de comandos en el cliente (Firefox, Chrome, IE) en el Menú breve.
15 HTML repetitivo
Al usar el complemento de plantilla HTML, elimine el problema de volver a escribir las etiquetas de encabezado y cuerpo para nuevos archivos HTML. Simplemente ingrese html en un archivo vacío y presione Tabulador para generar una estructura de documento limpia.
16 Soporte HTML CSS
Nombre e identificación de clase de CSS de solicitud inteligente
17 fragmentos de HTML
Etiquetas HTML de solicitud inteligente, así como el significado de la etiqueta
18 fragmentos de código JavaScript (ES6)
Las indicaciones inteligentes de sintaxis ES6 y la entrada rápida no solo admiten .js, sino que también admiten .ts, .jsx, .tsx, .html, .vue, lo que ahorra tiempo para configurarlo para admitir varios archivos de código js
19 Npm Intellisense
La finalización automática introduce dependencias instaladas en módulos de nodo.
20 Sentido de ruta
Autocompletar nombres de archivo. El lugar más utilizado es que al importar otros archivos, puede solicitar el archivo y completar rápidamente el nombre del archivo que se va a importar.
21 Vista previa de rebajas mejorada
Vista previa de rebajas en tiempo real
22 Codelf
Generar nombres de variables
23 historia local
El código de historial se puede grabar
24 iconos vscode
Haz que la interfaz de edición sea más hermosa
25 caja de cambio
Modifique rápidamente la selección actual o el nombre de la palabra actual
26 rebajas todo en uno
Markdown All in One es un complemento que puede lograr una experiencia de edición de Markdown comparable a Typora
27 tamaño de archivo
ver el tamaño del archivo
28 Quokka
Quokka es un complemento de herramienta de depuración que proporciona comentarios en tiempo real sobre el código que está escribiendo
29 Visor SVG
Este complemento agrega muchos programas SVG útiles en Visual Studio Code, puede abrir archivos SVG y verlos sin salir del editor
30 TabNueve
TabNine es una herramienta de autocompletado de código basada en inteligencia artificial
31 Búho Nocturno
Un tema increíble que te da mucha motivación al escribir código.
32 REST Cliente
La extensión del cliente REST le permite enviar solicitudes HTTP y ver las respuestas directamente en VSCode. Ya no es necesario utilizar aplicaciones externas para enviar solicitudes HTTP al servidor.