Eslint(airbnb config) wants to have my params on new lines when I have multiple params. But when I do that, vscode formatting keeps giving 4 spaces indentation instead of 2 as expected.
Result:
const Example = ({
param1,
param2,
param3,
}) => (
<div>
{param1} {param2} {param3}
</div>
);
expected:
const Example = ({
param1,
param2,
param3,
}) => (
<div>
{param1} {param2} {param3}
</div>
);
Is there a setting I can use in vscode to get the expected behavior?
You can avoid conflicting rules by using eslint-config-prettier or preferably prettier-eslint integration. This integration will use eslint config for formatting the rules and there won't be any conflicts.
If you are using VS Code, there is a config option for prettier-vscode
Related
I just started modifying the electron-react-boilerplate project and tried doing the following:
In the App.tsx file I added a button:
const ping = () => {
electron.ipcRenderer.myAwesomePing('Hello world!');
};
const Hello = () => {
return (
<div>
...
<button type="button" onClick={() => ping()}>
Ping!
</button>
...
</div>
);
};
And in the preload.js file, I added the corresponding call for myAwesomePing:
contextBridge.exposeInMainWorld('electron', {
ipcRenderer: {
myAwesomePing(text) {
ipcRenderer.send('ipc-example', text);
},
When I run the code, everything seems to work fine and I receive the ping through the context-bridge on the main process.
But, visual studio code keeps complaining, that it
Cannot find name 'electron'. Did you mean 'Electron'?
inside App.tsx.
Is this because I am missing something or just a bug in vscode? Is there maybe a build step necessary to create the connection?
ERB recently added support for globally exposed variables via preload:
https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/src/renderer/preload.d.ts
Copy and paste the file into your project and it should just work.
I am using TailwindCSS with TWIG files. The purgecss works fine inside CSS files and also inside "normal" markup like
<div class="font-bold text-blue"></div>
But we are developing mostly Drupal TWIG templates and a lot of our TWIG files setting classes to an attributes array. And the bellow doesn't work.
attributes.addClass(['font-bold', 'bg-blue']);
or
{% set classes = ['font-bold', color == 'blue' ? 'bg-blue'] %}
This is my purgecss configuration:
gulp.task(
"styles",
gulp.series("sass", function () {
const postcssimport = require("postcss-import");
return gulp
.src("src/styles.css")
.pipe(sass().on("error", sass.logError))
.pipe(
postcss([
postcssimport(),
tailwindcss("./tailwind.config.js"),
autoprefixer,
])
)
.pipe(
purgecss({
mode: "layers",
content: ["templates/**/*.twig", "src/scss/**/*.scss"],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
})
)
.pipe(gulp.dest("./css"));
})
);
Do you have any idea about this?
Thank you.
The TailwindCSS Intellisense plugin for VS code has an experimental setting that lets you set custom regex expressions that fire autocomplete. It's announced by the plugin's author here:
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129#issuecomment-735915659
I use these 2 regular expressions to activate autocomplete for {% set classes = [] } and <element{{ attributes.addClass() }}> respectively:
"tailwindCSS.experimental.classRegex": [
["classes =.+\\[([^\\]]*)\\]","'([^']*)'"],
["addClass\\(([^\\)]*)\\)","'([^']*)'"]
]
This goes into the main settings.json file for VS Code.
I'm trying to use a custom Input component on a Typeahead with the multiple option set. I see in the docs it says to "handle the refs" correctly, but I see no examples of how this is done. I'm not sure what to pass into referenceElementRef. Everything I've tried so far just doesn't render the options as I type. I see them in the DOM, but the opacity of the .rbt-menu is set to 0, so they're basically hidden.
Here's my code so far:
const divRef = React.useRef(null);
return (
<Col>
<div ref={divRef}>
<span className="uppercase">
<FormattedMessage id="d.customer" defaultMessage="Customer" tagName="h4" />
</span>
<AsyncTypeahead
multiple
id="customer-filter-input"
inputProps={{
'aria-label': 'Customer search',
style: { fontSize: '14px' },
}}
key={'customer-input'}
minLength={4}
isLoading={props.isLoadingcustomersSuggestions}
delay={300}
onSearch={(term: string) => handleFilterInputs(term, 'customers')}
size={'lg'}
options={dataSource}
labelKey={'defaultMessage'}
placeholder={intl.formatMessage({
id: 'companyName',
defaultMessage: 'Company name',
})}
onChange={(filterItem: any) => handleAutocompleteUpdate(filterItem, 'customer')}
renderInput={({ inputRef, referenceElementRef, ...inputProps }: any) => (
<Input
{...inputProps}
style={{ position: 'relative' }}
ref={(input: any) => {
inputRef(input);
referenceElementRef(divRef); // What do I put here?
}}
/>
)}
/>
</div>
</Col>
);
And this is what renders in the DOM after I type in the Typeahead and get results:
Any ideas or working examples of Typeahead using multiple and renderInput together?
EDIT:
Here's a codesandbox of what I'm seeing. I also see that the problem is also happening when multiple is NOT set. It seems to be an issue with using renderInput. Is it required that I also use renderMenu?
https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-forked-3kz3z
If you upgrade the typeahead version in your sandbox to the latest version (v5.1.1) and pass the input element to referenceElementRef, it works (note that you need to type some characters into the input for the menu to appear):
// v5.0 or later
renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
referenceElementRef(input);
}}
/>
)}
The menu is rendered in relation to the referenceElementRef node by react-popper. In most common cases, the reference node will be the input itself. The reason there's both an inputRef and a referenceElementRef is for more complex cases (like multi-selection) where the menu needs to be rendered in relation to a container element around the input.
If using v4 of the component, the approach is similar, but the ref to use is simply called ref:
// v4
renderInput={({ inputRef, ref, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
ref(input);
}}
/>
)}
I like 'format on save' VSCode feature very much. But now I'm experiencing annoying wrong formatting of tsx files in VS Code (1.49.2).
Here is an example. Here two lines have extra indents ('single' block)
import React from 'react';
const TestComponent = (props: { isList: boolean }) => {
return (
<div>
{props.isList ? (
<div>liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiist</div>
) : (
<div>siiiiiiiiiiiiiiiiiiiiiiiingle</div>
)}
</div>
);
};
export default TestComponent;
the same code in jsx file is formatted correctly
import React from 'react';
const TestComponent = props => {
return (
<div>
{props.isList ? (
<div>liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiist</div>
) : (
<div>siiiiiiiiiiiiiiiiiiiiiiiingle</div>
)}
</div>
);
};
export default TestComponent;
I tried to switch default vscode formatter to eslint, null, prettier (user/workspace) - no difference. When I run prettier --write src/components/TestComponent.tsx the tsx file is formatted correctly.
I also checked typescript-specific formatting settings in VS Code, but couldn't find anything related. For the test I've removed .eslint.js config file and my project doesn't have .prettierrc config.
it was wrong formatter specified in $HOME/.config/Code/User/settings.json (on Linux), something like
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
it should be either set to esbenp.prettier-vscode or removed in order to use the default one
I fixed this problem by going to my user settings and deleting
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
and configuring prettier to be the default formatter
I'm really hoping someone can help me with this issue because I've searched high and low to no avail and tried everything I can think of. I'm new to ReactJS and Browserify (though I don't think this has anything to do with Browserify) and can't seem to get this code working. I've been following along with the video series "Getting Started With React.js," and section 5.2 introduces Browserify and setting it up properly to work with React. Using plain old JavaScript, I'm able to get it working no problem, but when I try to use Coffee-Reactify and CoffeeScript, everything compiles fine, but when I load the page, I get this error:
"Uncaught TypeError: Cannot read property 'firstChild' of undefined"
When I follow the stack trace, it seems to error out in the findComponentRoot method of React, which I haven't touched. This leads me to believe there's something wrong with my CoffeeScript, but I've compared it line for line with the JavaScript, and aside from the additional "return" statements the CoffeeScript compiler adds, nothing seems too different. If anyone out there can replicate or identify my issue, I'd greatly appreciate it! Here is the code for all of my files, and thank you all very much in advance!
index.jade
doctype html
html
head
meta(charset='utf-8')
title React Tools
link(rel='stylesheet', href='bower_components/bootstrap/dist/css/bootstrap.css')
body
#app
script(src='bower_components/lodash/dist/lodash.js')
script(src='bower_components/react/react.js')
script(src='build/app.js')
app.coffee
MessageBox = require('./MessageBox.cjsx')
reactComponent = React.render(
<MessageBox />,
document.getElementById('app')
)
SubMessage.cjsx
SubMessage = React.createClass
handleDelete: (e) ->
#props.onDelete(#props.message)
propTypes:
message: React.PropTypes.string.isRequired
getDefaultProps: ->
message: "It's good to see you"
render: ->
<div>
{#props.message}
<button onClick={#handleDelete} className='btn btn-danger'>x</button>
</div>
module.exports = SubMessage
MessageBox.cjsx
React = require 'react'
SubMessage = require './SubMessage.cjsx'
MessageBox = React.createClass
deleteMessage: (message) ->
newMessages = _.without(#state.messages, message)
#setState
messages: newMessages
handleAdd: (e) ->
newMessage = #refs.newMessage.getDOMNode().value
newMessages = #state.messages.concat [newMessage]
#setState
messages: newMessages
getInitialState: ->
isVisible: true,
messages: [
'I like the world',
'Coffee flavored ice cream is underrated',
'My spoon is too big',
'Tuesday is coming.',
'I am a banana'
]
render: ->
inlineStyles =
display: if #state.isVisible then 'block' else 'none'
messages = #state.messages.map ((message) ->
<SubMessage message={message} onDelete={#deleteMessage} />
).bind(#)
return (
<div className='container jumbotron' style={inlineStyles}>
<h2>Hello, World</h2>
<input ref='newMessage' type='text' />
<button className='btn btn-primary' onClick={#handleAdd}>Add</button>
{ messages }
</div>
)
module.exports = MessageBox
As a side note, React is partially "working" because the messages array gets mapped to a SubMessage array and displays properly with the delete buttons. So the error seems to be happening at a later point in the cycle. Thanks again!
Wow, what an oversight on my part. It turns out I was loading React from two different places, once as a node module in my coffee/cjsx files and again in my HTML, but from a bower-installed version of React. I can't believe I spent so much time on this, but hopefully my struggle helps somebody else!