I'm building a react app but when I import a .css file, the vscode doesn't show the file in the intellisense.
I'm not sure if this is a problem with vs code or something in my webpack config.
If you think that the webpack config file is important for this problem, I can post it on the question.
Edit:
When I add a .js or .jsx file, it appears normally, but .css files don't
I don't use any extensions for the paths.
VS Code doesn't support path completion for all file types. But you should get this going with the Path Autocomplete extension.
christian-kohler.path-intellisense do works great for suggesting path completion with .css
Just disable the built-in path auto-complete function in settings
{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }
Use Path Intellisense Extension in vs code
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Related
I have a react monorepo project with a number of aliases (typescript paths) setup which makes importing files easier without the need to use relative paths everywhere.
For example if I have a component in src/components/Sidebar/Toggle.jsx and I want to import that anywhere in the application I can just do import {Toggle} from '#company/components/Sidebar/Toggle' and there’s no need to do any relative path importing like ../../../Toggle.
Company is just an example alias to the src directory setup in tsconfig.json like:
"paths": {
"#company/*": ["./src/*"]
},
This works fine in vscode but in neovim (I’m using nvim-lspconfig with eslint) all exported functions which are imported using the alias have a warning
Exported declaration not used within other modules
even though they are.
If I import them using relative paths it works without warning.
Does anyone have a suggestion as what config I need to change so that neovim can see that these functions are in fact used in other files?
I've tried adding config in .eslintrc.json like this as suggested by https://www.npmjs.com/package/eslint-import-resolver-typescript but this did not solve it.
settings: {
'import/resolver': {
typescript: {
project: ['packages/*/tsconfig.json'],
},
},
}
I should also note that running eslint directly on the file with my current configuration works fine with no errors so this is somehow related to the neovim plugin.
With a bit more debugging I can see that the eslint plugin doesn't seem to be using the correct configuration file as it's root. There is an .eslintrc.js file in a sub folder but the main .eslintrc.js file lives higher up in the directory tree. The plugin seems to find the first .eslintrc.js and use that as the root file.
This seems to have turned out to be related to the eslint plugin in nvim-lsp. More here https://github.com/neovim/nvim-lspconfig/issues/2400
I have a project with Vite, React and Typescript. I am using VSCode as IDE.
Any file other than .ts or .tsx doesn't get VSCode IntelliSense working when I write import './...'
I first though it was an issue or a missing extension for VSCode but after adding "allowJs": true in my tsconfig.json, I could see .js, .cjs, etc..
Same with "resolveJsonModule": true, I get intellisense for JSON file import.
However, I don't get CSS/SCSS IntelliSense. Is there a way to turn on VSCode IntelliSense for more file extensions or allow typescript to import CSS/SCSS/SVG/etc..?
A temporary fix I found is to write "import from './'". The .scss files are visible that way, but not if I write "import styles from './'". Same applies for .css. Then obviously add back in an alias if you require.
EDIT:
Fixed it by adding this to my vscode settings.json:
"javascript.suggest.paths": false,
"typescript.suggest.paths": false
I am also using Kohler's Intellisense extension.
I recently start using tailwind CSS in my react app. Tailwind work when I use its class in elements. But Intellisense plugins doesn't suggest classes when I start typing.
I see other people have same problem and saw the solution others explain but after all I can't fix this.
Alos it doesn't work on html files to when I create a .html file
I used tilwind installation document on https://tailwindcss.com/docs/guides/create-react-app to install tailwind.
I play around with some setting and configuration that others said like:
I added these lines to the setting.json file setting.json file
"tailwindCSS.includeLanguages": {
"javascriptreact": "html",
"typescriptreact": "html",
"plaintext": "html"
},
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
And also use "npx tailwindcss-cli#latest init" command to create tailwind.config.js file
tailwind.config.js file
But after all it still doesn't work and I don't know what else I should do.
If someone could give me a hand with this problem. Thanks
Try adding this to vscode setting.json:
"editor.quickSuggestions": { "strings": true }
That worked for me as mine seemed to have issues with auto suggestions while typing in strings.
Having issues running gatsby build with gatsby-starter-wordpress-advanced theme:
Error: ENOENT: no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced\.template-cache\tmp-\.js'"
I figured this might be a problem with the path. The path should rather look like:
writing tmp-new-page/ template: open '.template-cache/tmp-new-page.js'
See repo: https://github.com/henrikwirth/gatsby-starter-wordpress-advanced/blob/master/create/utils.js
Line 53 you find the function createPageWithTemplate. I've tried console.log(page.uri) to see what's going on. It outputs the filename correctly. I've also tried with gatsby clean to clear the cache. It seems to be some kind of backslash issue where the path comes with a \ .js at the end instead of sample-page.js:
no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced\.template-cache\sample-page\.js'
The issue have been resolved. The problem was related to update in WPGraphQL WordPress plugin. Had to update the paths, because the page.uri is different in the newer versions of WPGraphQL. Before it was just: some-page now it is /some-page/.
Secondly in the page template creation process the theme was using the uri, therefore, this messed up the paths for the template files. This has been switched to page.slug instead now and some extra checks, to make sure the frontPage is not ending up producing a wrong path.
The master branch of the starter theme have been updated.
I'm doing various projects in React.js with using awesome WebStorm by JetBrains.
Every time I type an existing component name WebStorm imports it automatically for me, which is awesome, but it is doing so by its relative path based on the file I'm doing the importation on.
Looks like so:
import vintageAxios from "../../../../services/api/index";
But I'm expecting it to be like:
import vintageAxios from "services/api/index";
I already setup my .env.local file with the NODE_PATH=src/ variable, I've used create-react-app to setup the project.
EDIT: I'm not having problems with the importations. What I want to know is if there is a way to configure WebStorm so it automatically does the importations with absolute instead of relative paths.
Found it (WebStorm 2017.2), after marking your source directory (ex. /src) as the source root (right click it to find that), you can then check this box:
For anyone using Typescript. Check the option Use paths relative to tsconfig.json in Editor > Code Style > Typescript