Giter VIP home page Giter VIP logo

prettier-vscode's Introduction

Prettier formatter for Visual Studio Code

VS Code package to format your Javascript / Typescript / CSS using Prettier.

Installation

Install through VS Code extensions. Search for Prettier - JavaScript formatter

Visual Studio Code Market Place: Prettier - JavaScript formatter

Can also be installed using

ext install prettier-vscode

Usage

Using Command Palette (CMD + Shift + P)

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Format On Save

Respects editor.formatOnSave setting.

Settings

prettier.eslintIntegration (default: false) - Javascript only

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from eslint rules.

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: 'none')

Controls the printing of trailing commas wherever possible. Valid options:

  • "none" - No trailing commas
  • "es5" - Trailing commas where valid in ES5 (objects, arrays, etc)
  • "all" - Trailing commas wherever possible (function arguments)

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

prettier.parser (default: 'babylon') - Javascript only

Which parser to use. Valid options are 'flow' and 'babylon'.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.javascriptEnable (default: ["javascript", "javascriptreact"])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser babylon or flow depending on prettier.parser for given language ids. Use with care.

prettier.typescriptEnable (default: ["typescript", "typescriptreact"])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser typescript for given language ids. Use with care.

prettier.cssEnable (default: ["css", "less", "scss"])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser postcss for given language ids. Use with care.

Prettier resolution

This extension will use prettier from your project's local dependencies. Should prettier not be installed locally with your project's dependencies, a copy will be bundled with the extension.

Contribute

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issue or PRs!

prettier-vscode's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.