ony3000 / prettier-plugin-brace-style Goto Github PK
View Code? Open in Web Editor NEWA Prettier plugin that can apply ESLint's brace-style rules.
License: MIT License
A Prettier plugin that can apply ESLint's brace-style rules.
License: MIT License
For reference: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
The official prettier-plugin-tailwindcss will nicely sort your tailwind classes into an opinionated order. I would love to be able to use this classnames plugin, but unfortunately when I add it to my tailwind config it breaks the sorting that the official plugin provides.
Add these plugins to your .prettierrc.json: (order doesn't matter)
"plugins": [
"prettier-plugin-tailwindcss",
"prettier-plugin-classnames"
]
Class sorting breaks while line wrapping still works
Both class sorting and line wrapping work in harmony
package.json
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@figma/plugin-typings": "^1.76.0",
"@prettier/sync": "^0.5.1",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"prettier": "^3.2.5",
"prettier-plugin-brace-style": "^0.5.0",
"prop-types": "^15.8.1",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"vite-plugin-singlefile": "^0.13.5"
}
.prettierrc
{
"semi": true,
"trailingComma": "none",
"singleQuote": true,
"tabWidth": 4,
"printWidth": 100,
"plugins": ["prettier-plugin-brace-style"],
"braceStyle": "stroustrup"
}
I have an empty code block like the following:
registerCallbacks() {}
When I save my file, it changes it to the following:
}
egisterCallbacks() {}
If I uninstall the plugin, the bug doesn't happen anymore. Is it conflicting with something else in VS code?
No change to the code block on save.
Could this be also applied to array of objects, like the below?
await func(
{
a: '',
b: '',
},
{
a: '',
b: '',
}
);
In 1tbs
, it should look like
await func({
a: '',
b: '',
}, {
a: '',
b: '',
});
and like so in allman
await func({
a: '',
b: '',
},
{
a: '',
b: '',
});
support for option "allowSingleLine"
This rule has an object option for an exception:
"allowSingleLine": true (default false) allows the opening and closing braces for a block to be on the same line
"prettier": "^3.0.3",
"prettier-plugin-brace-style": "^0.3.0",
Just npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/prettier
npm WARN dev prettier@"^3.0.3" from the root project
npm WARN 2 more (prettier-plugin-brace-style, @prettier/sync)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer prettier@"~2.8.4" from [email protected]
npm WARN node_modules/prettier-plugin-brace-style/node_modules/prettier-plugin-merge
npm WARN optional prettier-plugin-merge@"~0.2.0" from [email protected]
npm WARN node_modules/prettier-plugin-brace-style
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/prettier
npm WARN peer prettier@"~2.8.4" from [email protected]
npm WARN node_modules/prettier-plugin-brace-style/node_modules/prettier-plugin-merge
npm WARN optional prettier-plugin-merge@"~0.2.0" from [email protected]
npm WARN node_modules/prettier-plugin-brace-style
No conflicts. This creates issues in some of my CI.
Just wondering if this is pretty much equivalent to the "curly" eslint rule: https://eslint.org/docs/latest/rules/curly
Thanks!
Refs: prettier-plugin-merge#18
VSCode 1.85.1
prettier 3.1.1
prettier-plugin-brace-style 0.5.0
Select a block to format and use editor.action.formatSelection in VSCode.
VSCode has this cool feature called Format selection (editor.action.formatSelection) which allows me to only format my own blocks of a file without having to change it completely. The only reason for me to use this plugin would be to use prettier as formatter for this feature. Otherwise I would just use a relative feature in eslint and use it as formatter, because eslint doesn't have an api for Format selection and with your plugin so does prettier.
Prettier has some kind of api for format selection which should be supported by the plugin.
Nevermind error was on my account. had conflicting plugins.
Put one of these snippets in any JavaScript file and try to format it.
function foo(/* args here */) {
statement;
}
if (condition) {
// statement
}
const foo = [
// elements
];
get an error Comment "..." was not printed
.
no errors.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.