¿Cómo se cambian las opciones de formato en Visual Studio Code?

84

Sé que puede formatear el código usando ctrl + cmd + f en Visual Studio Code, pero ¿cómo cambia las opciones de formato para cada idioma?

Por ejemplo, en Visual Studio 2013 puedo elegir el modo compacto para CSS.

¿Hay otro archivo json oculto para hacer eso?

Matt McCabe
fuente
1
Probablemente no. Si ha leído el documento en línea , puede notar que Microsoft solo mencionó la función de formato para TypeScript.
yushulx
Funciona para C # y JavaScript, no puedo encontrar una lista oficial, pero es más que TypeScript.
Matt McCabe
1
estamos en 2017 y todavía no es compatible?
Asqan

Respuestas:

18

Editar:

Esto ahora es compatible (a partir de 2019) . Consulte la respuesta de sajad saderi a continuación para obtener instrucciones.

No, esto no es compatible actualmente (en 2015) .

Isidor Nikolic
fuente
11
Es una pena, votaré a favor y esperaré y veré. Sospecho que será otro archivo de configuración json, esa parece ser la dirección en la que van.
Matt McCabe
9
¿Ya no es correcto? ¿Entonces como? Al menos proporcione una URL para eso.
Malditas verduras
2
Perdón por la vaguedad. El enlace de voz de usuario de VisualStudio está roto. Probablemente debería ser un problema de github, y pude encontrar github.com/Microsoft/vscode/issues/1533 . También puede buscar "formato" en su configuración y encontrará opciones de javascript.format.
SgtPooki
80

En el código VS

prensa Ctrl+Shift+P

luego escribe Format Document With...

Al final de la lista, haga clic en Configure Default Formatter...

Ahora puede elegir su embellecedor favorito de la lista.

Sajad Saderi
fuente
19

Acabo de encontrar esta extensión llamada embellecer en Market Place y sí, es otro archivo config \ settings. :)

Embellezca javascript, JSON, CSS, Sass y HTML en Visual Studio Code.

VS Code usa js-beautify internamente, pero carece de la capacidad de modificar el estilo que desea usar. Esta extensión permite ejecutar js-beautify en VS Code, Y respetar cualquier archivo .jsbeautifyrc en el árbol de ruta del archivo abierto para cargar el estilo de su código. Ejecute con F1 Beautify (para embellecer una selección) o un archivo F1 Beautify.

Para obtener ayuda sobre la configuración en .jsbeautifyrc, consulte Settings.md

Aquí está el repositorio de GitHub: https://github.com/HookyQR/VSCodeBeautify

Leniel Maccaferri
fuente
Gracias, se ve bastante bien, me lo estoy perdiendo en mi CSS, javascript / mecanografiado y html parece funcionar bien. Parece que podría poner un poco de eso en su .editorconfig
Matt McCabe
Una de las mejores soluciones, ya que utiliza .jsbeautifyrcun archivo de configuración, que a su vez será útil para otros miembros del equipo que podrían estar usando otros IDE para escribir código. Para Sublime Text, el complemento HTML-CSS-JS-Prettify es el mejor que existe. Desafortunadamente para Eclipse, las implementaciones en el mercado tienen errores. Todavía necesito usar lo editorconfigque hace un trabajo decente.
Shiyaz
Embellecer es bueno pero siempre me da problemas. Me parece más bonito ser mejor y más configurable.
Trevor Jex
8

Si estamos hablando de Visual Studio Code hoy en día, establece un formateador predeterminado en su settings.json:

  // Defines a default formatter which takes precedence over all other formatter settings. 
  // Must be the identifier of an extension contributing a formatter.
  "editor.defaultFormatter": null,

Señale el identificador de cualquier extensión instalada, es decir

"editor.defaultFormatter": "esbenp.prettier-vscode"

También puede hacerlo de forma específica :

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[sass]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
},

Vea también aquí .


También puede asignar otras teclas para diferentes formateadores en sus atajos de teclado ( keybindings.json). Por defecto, dice:

{
  "key": "shift+alt+f",
  "command": "editor.action.formatDocument",
  "when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
}

Por último, si decide utilizar el complemento Prettier yprettier.rc , por ejemplo, desea una sangría diferente para html, scss, json ...

{
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none",
    "useTabs": false,

    "overrides": [
        {
            "files": "*.component.html",
            "options": {
                "parser": "angular",
                "tabWidth": 4
            }
        },
        {
            "files": "*.scss",
            "options": {
                "parser": "scss",
                "tabWidth": 2
            }
        },
        {
            "files": ["*.json", ".prettierrc"],
            "options": {
                "parser": "json",
                "tabWidth": 4
            }
        }
    ]
}
Frank Nocke
fuente
6

Una solución que me funciona (julio de 2017) es utilizar ESLint . Como todo el mundo sabe, puede utilizar el linter de varias formas, global o localmente. Lo uso localmente y con la guía de estilo de Google. La forma en que lo configuré es la siguiente ...

  • cd to your working directory
  • npm init
  • npm install --save-dev eslint
  • node_modules/.bin/eslint --init
  • I use google style and json config file

Ahora tendrá un .eslintrc.jsonarchivo en la raíz de su directorio de trabajo. Puede abrir ese archivo y modificarlo como desee utilizando las reglas de eslint . Junto cmd+,a abrir las vscodepreferencias del sistema. En la barra de búsqueda, escriba eslinty busque "eslint.autoFixOnSave": false. Copie la configuración y péguela en el archivo de configuración del usuario y cámbiela falsea true. Espero que esto pueda ayudar a alguien que utilice vscode .

Gilbert
fuente
1

Para cambiar específicamente la configuración de formato de C # (OmniSharp), puede usar un archivo json:
Usuario: ~/.omnisharp/omnisharp.json o %USERPROFILE%\.omnisharp\omnisharp.json
Espacio de trabajo: omnisharp.json archivo en el directorio de trabajo al que se ha apuntado OmniSharp.

Ejemplo:

{
  "FormattingOptions": {
    "NewLinesForBracesInMethods": false,
    "NewLinesForBracesInProperties": false,
    "NewLinesForBracesInAccessors": false,
    "NewLinesForBracesInAnonymousMethods": false,
    "NewLinesForBracesInControlBlocks": false,
    "NewLinesForBracesInObjectCollectionArrayInitializers": false,
    "NewLinesForBracesInLambdaExpressionBody": false
  }
}

Detalles de esta publicación | esquema omnisharp.json (ya está en vscode, puede simplemente CTRL + ESPACIO)

Otras extensiones de idioma pueden tener archivos similares para configurarlo.

geekley
fuente