I am setting up my local workspace at the moment and I was wondering whether I could use the code styles found here (https://github.com/google/styleguide) inside my Webstorm IDE.
When trying to import code styles Webstorm asks for JSCS config files. I have no idea what they are.
Is there a way to import the *.xml-files as code styles?
Thanks
there is no way to import arbitrary XML as a new code style in WebStorm. WebStorm stores its own code style settings in .xml files, but format is different from the one used in https://github.com/google/styleguide. So no, there is no way to import these style guides in WebStorm.
Starting from version 11, WebStorm supports importing a subset of code style options from JSCS - see http://blog.jetbrains.com/webstorm/2015/08/maintaining-consistent-code-style/
Related
Is there any way to extend autocomplete for JetBrains IDEs with custom data?
I have ./node_modules/my_ui_kit/variables.js imported via postcss-simple-vars to my postcss.config.js and I want suggestions based on that variables in *.css files
I am able to generate those variables in json with custom syntax if that could help
When I am editing a file with the Vue extension in VS Code I do not get Syle intellisense in the HTML. If I change the Language Mode to HTML then it works but I no longer get Vue intellisense.
Is there a way to make this work in a Vue file?
Absolutely, you can install the following extension: Vetur. It has great features like linting, formatting, snippets and of course syntax highlighting.
I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:
Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)
Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.
Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.
But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.
Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.
Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.
So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.
If you have installed the Vetur extension on VS Code,
Go to the VS Code extension area.
Find Vetur and select the gear icon to enter settings of Vetur.
Scroll down until you find
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
Select pretter-eslint from dropdown menu
(if you don't see that option you can install Prettier extension).
Now you can see it formats your code automatically whenever you save.
I want to install fonts using npm, for example, Open Sans or Roboto.
If I search for Open Sans on npm and filter for packages with over 1000 downloads per month I find a whole list. I am not sure which source to choose here, some are not well maintained and none of them are from the original source of the font, in this case, google.
npm-font-open-sans
typeface-open-sans
open-sans-all
open-sans-fontface
opensans-npm-webfont
I noticed that fonts are often used through a direct link to fonts.googleapis. I would prefer to have a local copy of the font to be able to develop offline. Is there a common way to install fonts through npm? Or is there another automated font download tool that I'm not aware of?
I use typefaces yarn add typeface-roboto
and then just do a require("typeface-roboto") / import "./typeface-roboto" or whatever font you choose.
I hope this is the answer you're looking for?
Use fontsource, typefaces is deprecated now.
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (layout.js), page component (index.js), or gatsby-browser.js.
import "#fontsource/open-sans" // Defaults to weight 400 with all styles included.
Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.
import "#fontsource/open-sans/500.css"; // All styles included.
import "#fontsource/open-sans/900-normal.css"; // Select either normal or italic.
Alternatively, the same solutions could be imported via SCSS!
#import "~#fontsource/open-sans/index.css";
#import "~#fontsource/open-sans/300-italic.css";
Fontsource
The typefaces project is now deprecated and its successor is fontsource.
Usage
There's no much difference at the point of using it.
Install:
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Import:
import "#fontsource/open-sans"
Reference:
body {
font-family: "Open Sans";
}
I'm using the updated version of the IntelliJ IDEA and am trying to export my code style settings so that they can be used by all developers working on a particular project. I read the tutorials at https://confluence.jetbrains.com/display/IntelliJIDEA/Code+Styles and http://forum.shakacode.com/t/sharing-your-intellij-rubymine-webstorm-codestyle-among-developers/240, which seems fairly simple.
Unfortunately that is not how my 'export settings' pane looks like, and I don't have a line that says 'code styles'. Mine looks like
The closest I can find is the line I highlighted which has CodeStyleSettingsManager in it along with a whole bunch of other stuff. However I tried using that and extracted the .jar file only to find that there was nothing much inside at all.
Does anyone know a way of exporting code styles that works with the latest version of IntelliJ?
Edit: My codeStyleSettings.xml file only contains the following:
<project version="4">
<component name="ProjectCodeStyleSettingsManager">
<option name="PER_PROJECT_SETTINGS">
<value/>
</option>
<option name="USE_PER_PROJECT_SETTINGS" value="true"/>
</component>
</project>
I don't understand, why you don't see Code Style in your list (it appears in my IDEA 14.1.5), but...
(...) export my code style settings so that they can be used by all developers working on a particular project
A better way to share the project code style across all developers is to include it in your VCS repository. Pulling such a commit will apply those code styles automatically. This is the file: project/.idea/codeStyleSettings.xml. If your VCS is set to ignore .idea/, add an exception for this file.
If you don't see this file at all, you're probably using a local formatter and your Project scheme is unchanged. In this case, go to Settings > Editor > Code Style > Scheme: Manage, select your formatter and click Copy to Project.
Update
Code style files only state the difference to the IDEA Default Code style (which is always the same). You can try this yourself: create a new project, go the the Code Style settings, select Project and change only one option. The codeStyleSettings.xml file will be created, and it will contain only this one option. If you could export your code style settings, the output would be exactly the same.