Is it possible to make WebStorm organize imports using the built-in "Optimise Imports" functionality in a single column list?
What I get currently:
import {
FrameRateComboModule, I18nModule, MockFactory,
EditorPanelComponent, TimecodeUtils
} from '#acme/components';
What I want:
import {
FrameRateComboModule,
I18nModule,
MockFactory,
SegmentEditorPanelComponent,
TimecodeUtils
} from '#acme/components';
Try setting ES6 import/export to Wrap Always in Settings | Editor | Code Style | JavaScript | Wrapping and Braces (or Settings | Editor | Code Style | TypeScript | Wrapping and Braces if you are using typescript)
Related
I'm using WebStorm and I want to remove the newline in empty classes/functions. I couldn't find a related question.
export class AppRoutingModule {
}
=>
export class AppRoutingModule { }
Enabling Keep when reformatting | Simple blocks in one line in Settings | Editor | Code Style | JavaScript (Typescript) | Wrapping and Braces will make the formatter keep the empty classes "as is" (i.e. not insert a new line). But there is no way to remove existing line breaks from such classes on re-formatting
I am having an issue trying to load the most basic custom mapping in React Native Web. The custom styles are loading just fine in the App, but not Web. Using the latest version with the babel loader hack as proposed here. I am using the default mapping as proposed in the UI Kitten docs for v5.x
My code looks like this:
import * as eva from '#eva-design/eva'
import * as mapping from '../styles/mapping.json'
import { myTheme } from '../styles/light-theme'
export default function App(): React.ReactElement {
return <>
<ApplicationProvider {...eva} theme={myTheme} customMapping={mapping}>
...
</ApplicationProvider>
</>
}
I tried replicating with a blank repo and it was working fine, so one line at a time I figured out that my import was not correct (not readable by babel?).
Instead of:
import * as mapping from '../styles/mapping.json'
Should be:
import {default as mapping} from '../styles/mapping.json'
The correct way is suggested in the UIKitten docs, so I don't think it will happen to many, but may help others as it's not an obvious thing if someone is working with the App emulator for the most time and not checking the Web until later.
This is the way I use the custom mapping with ts file: custom-mapping.ts
export const customMapping: any = {
components: {
CircleButton: {
meta:{...},
appearances: {...}
}
}
}
and import it like this:
...
import {customMapping} from '../custom-mapping';
<ApplicationProvider
...
customMapping={{...eva.mapping, ...customMapping}}
>
{children}
</ApplicationProvider>
In my project, I used eslint-import-resolver-alias for imports like below in .eslintrc:
{
"settings":{
"alias": [
["pckg", "pckg/src"]
]
}
}
And I use as below in my .js files
import pckg from 'pckg'
But when I try to find the declaration using a Cmd+Click by clicking on 'pckg' in the import statement, WebStorm says that there is no declaration to go to. I realize that WebStorm is not able to understand the import alias resolver plugin, but is there anyway to make it work
You can try using webpack aliases instead: create a dummy webpack configuration file with aliases like
...
alias: {
'pckg': path.resolve(__dirname, './pckg/src'),
},
...
and specify a path to it in Settings | Languages & Frameworks | JavaScript | Webpack, or use a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"pckg/*": "./pckg/src/*"
}
});
I need to understand how the Table concept is working in Karate API. So I just tried with the following example. I have created a feature file like this.
Feature: RCI Webservices Testing
Background:
* url 'test-something-url'
Scenario: JavaAPI Handler
Given request read('test.xml')
When method post
Then status 200
xmlstring xmlVar = response
* table xmlResponse
| xmlData | filename | statuscode |
| xmlVar | 'Customers.xml' | responseStatus |
* print 'Table Data :', <xmldata> (**tried without < > also** )
When I run this script through a java class i.e. JUnit Test, I'm not seeing anything in the print statement except Table Data:
Even I read the documentation, I'm not able to understand how does it work?
It will be helpful if you provide an example.
Thanks
You need an example, here you go: xml.feature just cut and paste from this and experiment.
Often in coding and templating I need to wrap a certain part of text. Is there any shortcut to wrap the current selection in WebStorm?
For example:
camel
//to
"camel"
or:
var x = 8;
//to
function(){
var x = 8;
}
I tried to use Using Surround Templates by Ctrl+Alt+J but I get the answer "No surround templates defined in this context".
I am using in WebStorm 2016.2.4
camel
//to
"camel"
Such surrounding can be enabled in settings (if it's not enabled in your):
Settings/Preferences | Editor | General | Smart Keys --> Surround selection on typing quote or brace
var x = 8;
//to
function(){
var x = 8;
}
Live Template is the way to go. Make sure that you use $SELECTION$ to denote selected text -- it's the key hint for IDE -- it tells that this is "Surround With" kind of Live Template.
This is covered in:
Official help page
Tutorial article
So your Live Template should look something like this:
function(){
$SELECTION$
}