본문 바로가기

webdesign/VisualStudio

VS extension prettier / edit settings.json from the command palette

관련글 : VS-setting-extension  


https://www.digitalocean.com/community/tutorials/code-formatting-with-prettier-in-visual-studio-code

 

https://code.visualstudio.com/docs/getstarted/settings

 

https://prettier.io/docs/en/ignore.html#css

To exclude files from formatting, create a .prettierignore file in the root of your project.

It’s recommended to have a .prettierignore in your project! This way you can run prettier --write . to make sure that everything is formatted (without mangling files you don’t want, or choking on generated files). And – your editor will know which files not to format!


How to apply prettier for selection

github.com/prettier/prettier-emacs/issues/30  

most of the time I change small portion of a file and don't want to reformat entire file. If there is a selection which would form a valid AST, please consider letting the user format only the selection. May be a flag to enable this behavior.  -  it6 commented on 4 Mar 2018

We don't support it because in most cases selections are not valid AST. If you really want this you could use or copy the code from this branch, which has the prettier-js-prettify-region function.  -   rcoedo commented on 26 Mar 2018 

 

www.freeformatter.com/css-beautifier.html 

 

 

1. prettier - how to automatically format code on save in VS

 

stackoverflow.com/questions/52586965/why-prettier-does-not-format-code-in-vscode

 

Why Prettier does not format code in VSCODE?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code editor. When I open a .vue file and press CMD+ Shift + P and choose Format Document, m...

stackoverflow.com

 

Code > Preferences > Settings > default formatter ( in the search field ) > esbenp.prettier-vscode (in the selectbox) - 2021

prettier > Extension Settings > editor.formatonsave (in the search field) > check Editor:Format On Save

 

----------------------------------------------------------------

2. disable specific language / how to edit the json file in VS  

when saving *.min.css or *.min.js  ❓ ❓ ❓ 

disable specific language link

Code > Preferences > Settings > prettier disable ( in the search field )

 

code.visualstudio.com/docs/getstarted/settings#:~:text=You%20can%20also%20open%20the,keyboard%20shortcut%20(Ctrl%2B%2C).

 

Visual Studio Code User and Workspace Settings

How to modify Visual Studio Code User and Workspace Settings.

code.visualstudio.com

( supunkavinda.blog/vscode-editing-settings-json )

To customize your editor by language, run the global command Preferences: Configure Language Specific Settings (command id: workbench.action.configureLanguageBasedSettings) from the Command Palette (control + shift + p : ⇧⌘P) which opens the language picker. Select the language you want, which then opens your user settings.json with the language entry where you can add applicable settings.

The following examples customize editor settings for language modes typescript and markdown.

 

★★★

1. Command Palette (control + shift + p : ⇧⌘P)

2. Preferences: Configure Language Specific Settings 

3. Select the language via the drop-down: (type script) -> open settings.json

4. add script below(type script)

 

{

"[typescript]": { "editor.formatOnSave": true, "editor.formatOnPaste": true }, "[markdown]": { "editor.formatOnSave": true, "editor.wordWrap": "on", "editor.renderWhitespace": "all", "editor.acceptSuggestionOnEnter": "off" } }{
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "editor.renderWhitespace": "all",
    "editor.acceptSuggestionOnEnter": "off"
  }
}

----------------------------------------------------------------

3. where the settings.json file is / settings file locations 

code.visualstudio.com/docs/getstarted/settings#_settings-file-locations

 

Visual Studio Code User and Workspace Settings

How to modify Visual Studio Code User and Workspace Settings.

code.visualstudio.com

Settings file locations#

By default VS Code shows the Settings editor, but you can still edit the underlying settings.json file by using the Open Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor setting.

Depending on your platform, the user settings file is located here:

  • Windows %APPDATA%\Code\User\settings.json
  • macOS $HOME/Library/Application Support/Code/User/settings.json
  • Linux $HOME/.config/Code/User/settings.json

 

live server

 

live sass compiler