This is what I have in my user settings.json.
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
Love the sorting, but don’t like that Visual Studio Code is removing unused imports vs greying them out.
Finally it's possible in 2021.
Replace source.organizeImports by source.sortImports.
"editor.codeActionsOnSave": {
"source.sortImports": true
},
This is currently not possible. See https://github.com/microsoft/TypeScript/issues/36085
Related
I'm currently building a UI Kit for a client who is using ASP.NET for the main application/backend for their project. The UI Kit that I'm building is created using NuxtJS and I want to compile all of the SCSS files along with Bootstrap into a single compiled CSS file, from what I've gathered on the Nuxt Docs they recommend compiling the SCSS files into single CSS files for each component.
Before I start making a mess of the config file, is there a way to compile them into a single file so the client can just enqueue it on their end? It doesn't need to be the most performative which is why we're going to push it into a singular file.
Here is the part of the doc for Nuxt2, I quote
You may want to extract all your CSS to a single file. There is a workaround for this:
nuxt.config.js
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
This part is not directly written but still available for Nuxt3, so I guess that it should work in a similar approach.
There is only one discussion on Nuxt3's repo, but you may start trying the snippet above already, to see if it fill some of your needs.
i have been trying to find documentation on this but i havent been able to. I use stylint in a project and we have the css order option activated. I haven't been able to set up VS code to show the errors and i haven't found a page with the information to actually know the order,so i always need to check on compile time if i have any mistakes in the CSS order properties, and it shows a huge error on screen.
this are the stylelint rules we have
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'if', 'else', 'include', 'extend']
}
],
'max-nesting-depth': 4,
indentation: 4,
// add your custom config here
// https://stylelint.io/user-guide/configuration
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
}
I dont see anything weird about it. It there a page where i can find the correct order? it is so annoying because when i get a stylelint order error, i usually have to find it in a few tries.
You are extending the stylelint-config-concentric-order community config. This config includes and configures the stylelint-order community plugin. You can find the order of the properties in the repo on GitHub.
You can see Stylelint errors in VS Code using the official Stylelint extension.
And you can have the extension automatically fix problems on save, which will include the order of your properties, using the editor.codeActionsOnSave configuration property:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "postcss","scss"],
"css.validate": false,
"scss.validate": false
}
Alternatively, you can run npx stylelint "**/*.scss" --fix" on the command line to automatically fix problems.
I'm new in Vuepress. I want to make a blog with a Vuepress-theme is available from github:
https://github.com/vuepress/vuepress-theme-blog
The official documentation shows how to change some things, for example the header, footer... as a colours, links... here more info:
https://vuepress-theme-blog.ulivz.com/config/#nav
To custom the allow parameters is from the file config.js with from module.exports object:
module.exports = {
themeConfig: {
nav: [
{
text: 'Blog',
link: '/',
},
{
text: 'Tags',
link: '/tag/',
},
]
},
}
But I would like to change the full navbar component. For this only I have found the way inside:
/node_modules/#vuepress-themeblog/components/Header.vue
At summary I want to know the best way to create new components. Maybe it's the better option change directly inside the components folder of the theme or is there any way?
I'm very confused in the documentation only shows a little changes.
Please Could you give me some advice?
Thanks!
You shouldn't edit the code inside the node_modules dir, as it is third-party code managed by the package manager.
You can solve your problem by creating your own theme using the vuepress-themeblog as a starting point.
The steps to write custom themes are described in the documentation. Copy the content of the vuepress-theme-blog repository into your theme folder and start working on your custom components.
I am using Visual Studio Code with a React Native project. ESLint is used to check the stuff specified in the .prettierrc.js.
When something isn't correct I get a hint like this:
Instead of getting these notifications and right clicking on them, selecting Fix this prettier/prettier problem, I want the problems to be fixed either automatically or using a shortcut combination. How can I configure that? I am currently using pure JavaScript, no Typescript.
Edit/create .vscode/settings.json so it will contain
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Fixes issues on save.
Thanks for #jonrsharpe! Just want to add my few cents.
Go to settings.json file:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
Add there:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Restart VSCode
Enjoy coding!))
UPDATE
While on Mac the solution above worked for me, on Windows to make it works I had to add following to settings.json :
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll": true
},
"eslint.autoFixOnSave": true
I am trying to setup this feature from tutorial:
https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md
but got an error
"C:\Users\User\AppData\Local\Programs\Microsoft" не является внутренней или внешней, исполняемой программой или пакетным файлом.
Could not open LeadsEdit.vue in the editor.
The editor process exited with an error: (code 1).
To specify an editor, sepcify the EDITOR env variable or add "editor" field to your Vue project config.
in my vue.config.js (project based on vue cli 3.0)
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('code'))
}
}
}
UPD. Without this code the problem still remain.
UPD2.
I am trying to set EDITOR variable in .env file
VUE_APP_EDITOR=/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe
Or with vue.config.js
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
}
}
}
But the problem still remains
What may cause this problem?
How can I fix this error?
It seems like dev tools is trying to open the editor executable C:\Users\User\AppData\Local\Programs\Microsoft, which is most likely wrong. The default install location on Windows 10 is (to the best of my knowledge) C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe.
launch-editor tries to find the editor from the currently running processes and falls back to the environment variables EDITOR and VISUAL (see https://github.com/yyx990803/launch-editor#why), so you can probably set the EDITOR env var to the correct path.
Probably, there are quotes missing around the editor config so it gets cut off at the first space. I don't really know where the path comes from, either you configured it via environment variables or in your vue project config.
Based on the information in your updated question, you could try this:
I don't know where the variable name VUE_APP_EDITOR comes from, but I guess it should be EDITOR. Change it to EDITOR and see what happens
The path you are using looks wrong (i.e. not like a windows path). Try c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe instead.
E.g.:
app.use('/__open-in-editor', openInEditor('c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
You can test whether the path is correct by starting a cmd shell and entering the path. If it is correct, VS Code should open. If not, it will tell you the path was not found.
Also have a look at this, there is some more on how to integrate vue devtools & VS Code: https://gist.github.com/moreta/d3989686b6a1f2416b5802cac8df16b4