Visual Studio Code Extensions

VSCode Extensions for SCSS/CSS

ext install bbugh.change-color-format - Change Color Format with repo at bbugh/vscode-change-color-format: VSCode extension that quickly transform selections to and from various color formats: #RRGGBB, hsl/a, rgb/a, color names, and more. to quickly transform any color format into another color format. Usage: Select just the color and run “Convert color …”.

Stylelint has a plugin for that: filipekiss/stylelint-color-format: Stylelint plugin to convert HEX colors to either RGB or HSL

VS Code extension: Sort CSS properties, CSS Rule Sorting

order things like CSS properties within declaration blocks

ext install mrmlnc.vscode-postcss-sorting - PostCSS Sorting samo koristi PostCSS sa plugin hudochenkov/postcss-sorting, ali to je prednost.

There is also a Stylelint plugin for sorting from the same author, called hudochenkov/stylelint-order.

There is a more popular css-declaration-sorter available, but the only VSCode extension CSS Sorter, is not updated. The repository for madskristensen/CssSorterVS provides more information and demonstrates how to install the full node.js module with the extension. Unfortunately, it is not currently functioning.

Sort CSS selection concentrically - Visual Studio Marketplace. očajno radi!

Concentric CSS order je ustvari super!

brandon-rhodes/Concentric-CSS: A standard order for CSS properties that starts at the outer edge of the box model and moves inward

same sstandard: CSS sorter - Visual Studio Marketplace

CSS Alphabetize dodaje komandu “CSS Sort Properties”

VS Code extension: CSS Compact, one-line formatter, format CSS in one line

Inače, u većini IDE to postoji kao normalna opcija: Compact CSS formatting in Visual Studio

Većina ekstenzija su vrlo rudimentarne i to me i nagnalo da i ja napišem jednu. Masovno koriste clean-css library, nemam pojma zašto baš taj? Pokušaću da ih sortiram po “kvalitetu”.

`idreamsoft.css-format-st3`

The idreamsoft/css-format-st3 repository provides a CSS formatting extension for Sublime Text 3, which can be installed with the command ext install idreamsoft.css-format-st3. Upon examination, I discovered that the extension contains various components in its backend, including js-beautify and eslint, but it performs well. It definitely uses js-beautify for formatting and supports both selections and entire files. The “Compact” format is my preferred option.

travis71i.clean-css-vscode - Clean CSS for VSCode with repo Travis71i/clean-css-vscode: Clean CSS adapted as a Visual Studio Code extension.
jsonchou.css-compact - css-compact with repo at jsonchou/cssCompact: let’s go back to original way to write our css

CSS Formatter by junstyle (ext install junstyle.css-formatter) sa repo junstyle/vscode-css-formatter: keep properties in one line ustvari koristi minifikaciju od clean-css/clean-css: Fast and efficient CSS optimizer for node.js and the Web što i nije loše samo po sebi, ali je problam što ne radi na SCSS i što ume

css-format-one-line with repo at lunelson/vscode-css-format-one-line

bestvow.css-compressor: [CSS Compressor](https://marketplace.visualstudio.com/items?itemName=bestvow.css-compressor) and repo at [bestvow/css-compressor: a visual studio code extension for compress css file as compact or minify format](https://github.com/bestvow/css-compressor), based on clean-css`
CSS Formatter by Martin Aeschlimann with repo aeschli/vscode-css-formatter: CSS Formatter for VSCode ustvari koristi js-beautify sa nekim parametrima.
williamdang.vscode-simply-css-formatter - Simply CSS Formatter koristi clean-css/clean-css: Fast and efficient CSS optimizer for node.js and the Web koji je u “maintenance mode”
ext install xxxxst.vscode-scss-format - scss-format sa repo na xxxxst/vscode-scss-format: vscode scss fromat as one line je samostalna i izgleda da korisnik aktivno ispravlja, što obećava. Pokrećeš sa Ctrl-J

Dakle sve su ozbiljna govna.

Napiši moj formatter za SCSS - nemoj! u jednoj liniji ali i po vertiakalam, i pametno. very opiniated i sortirano.

one line css

ima gomila sličnih ali ni jedna ne radi

css-property-initial-value

Code Linting

Stylelint

ext install stylelint.vscode-stylelint - Stylelint at repo stylelint/vscode-stylelint: The official Visual Studio Code extension for Stylelint.

Source: VSCode setup with ESLint + Stylelint, but w/o prettier | Alexanders`s blog

Treba imati ili instaliran u projektu ili najbolje globalno npm install -g stylelint. Ovo treba i na svakoj remote mašini kao root ili ćeš po projektu.

Ima podešavanja ali možda je bolje relying on a Stylelint configuration file in your project folder. Config is loaded from stylelint property of package.json, files .stylelintrc.{cjs,js,json,yaml,yml}, but the one I’ll use is stylelint.config.{cjs,js} exporting a JS object. Dakle, moj je stylelint.config.js

Formatting is called “autofixing” and the command is Fix all auto-fixable problems.

Inače, stylelint može normalno da se pokreće kao PostCSS plugin.

npm i -g stylelint

ako želiš pluginove neke opcionalne

npm i -g stylelint-order stylelint-color-format stylelint-declaration-block-no-ignored-properties

I tako, zaboravi! focus on writing and maintaining rules that help you avoid errors and enforce (non-stylistic) conventions, both of which are unique to Stylelint

Upravo ukidaju stylistic rules Migrating to 15.0.0 | Stylelint :)

EsLint

ESLint is “static analysis tool” to find problems in code and fix them. There is playgorund at ESLint Playground - ESLint - Pluggable JavaScript Linter.

microsoft/vscode-eslint: VSCode extension to integrate eslint into VSCode at repo microsoft/vscode-eslint: VSCode extension to integrate eslint into VSCode

ESLint can be used as a formatter and to enable this feature use the eslint.format.enable setting.

Code formatting

Prettier je “opiniated” code formatter that enforces a consistent style. Generalno mi je ok za većinu jezika, ali za neke me ekstra nervira i tu moram da ga zamenim. Playground je Prettier dok je repo prettier/prettier: Prettier is an opinionated code formatter..

Prettier nikad neće pordžavati CSS one-line format: [CSS] single line property formatting · Issue #5948 · prettier/prettier

Linter proveravajuv greške unapred, Stylelint je za SCSS, CSS i slično, ESLint je za JavaScript i slično. Oba lintera sada umeju i da formatiraju i to sa svim svojim detaljnim podešavanjima i oba imaju zvanične ekstenzija za VSCode. Ja ću se sad fokusirati na SCSS jer želim da namestim “compact” aka “one-line” formating.

Postoji dodatak za PHP za Prettier: prettier/plugin-php: Prettier PHP Plugin a tu je i Prettier PHP Playground a može i da se inkorporira u VSCode.

JS Beautifier je za Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS sa repo na beautify-web/js-beautify: Beautifier for javascript. Može da radi i u browseru.

PostCSS sa nekim pluginovima. na primer, evo ga hudochenkov/postcss-sorting

1. 1. Execute the “Extensions: Install Extensions” command from the Command Palette. 1. Type @id:stylelint.vscode-stylelint into the search form and install the topmost one.

Peacock je savršena extenzija koja samo menja neke male elemente u VSCode kako bi razlikovao razne instance ili Workspace-ove, a repo je johnpapa/vscode-peacock: Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code’s Remote features, and you want to quickly identify your editor..

date 03. Jul 2023 | modified 17. Aug 2024

filename: Tips » VSCode » Extensions