I have material icons installed and it was working perfectly showing JS icon, but recently VS code is loading the react icon for JS files for some reason and I can't figure out why.
Settings.json:
{
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "material-icon-theme",
"workbench.preferredLightColorTheme": "Monokai++",
"window.menuBarVisibility": "toggle",
"editor.minimap.enabled": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"dart.previewLsp": true,
"dart.debugExternalLibraries": true,
"dart.debugSdkLibraries": false,
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"liveServer.settings.donotShowInfoMsg": true,
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Monokai++",
"editor.fontWeight": "normal",
"material-icon-theme.activeIconPack": "none",
"material-icon-theme.folders.associations": {
},
"material-icon-theme.files.associations": {
}
}
Try adding the following setting to your config:
"material-icon-theme.files.associations": {
"**.js": "javascript",
}
With this setting you set the icon for every .js file to the javascript icon
Related
I'm working on an app where my main window is type desktop, but opening a new window by clicking a tray opens the same index instead of opening the html file i want. If I add the file link by hardcoding it returns a white screen because vite can not complile vue and ts included in the html file.
I even added it to the input values of vite.config.js
vite.config.js
build: {
sourcemap: true,
target: `chrome${chrome}`,
outDir: 'dist',
assetsDir: '.',
rollupOptions: {
input: {
main: join(PACKAGE_ROOT, 'index.html'),
upload: './upload/upload.html', // file i want to compile with vite to make it work
},
external: [
...builtinModules.flatMap(p => [p, `node:${p}`]),
],
},
emptyOutDir: true,
brotliSize: false,
}
createSecondWindow.ts
async function createSecondWindow() {
const browserUploadWindow = new BrowserWindow({
//skipTaskbar: true,
movable: true,
roundedCorners: true,
titleBarStyle: 'default',
resizable: true,
hasShadow: true,
show: true, // Use 'ready-to-show' event to show window
height: screen.getPrimaryDisplay().size.height-300,
width: screen.getPrimaryDisplay().size.width-300,
minHeight:screen.getPrimaryDisplay().size.height-350,
minWidth:screen.getPrimaryDisplay().size.width-600,
enableLargerThanScreen: true,
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, '../../preload/dist/index.cjs'),
},
});
browserUploadWindow.on('ready-to-show', () => {
browserUploadWindow?.show();
if (import.meta.env.DEV) {
browserUploadWindow?.webContents.openDevTools();
}
});
const pageUrl = import.meta.env.DEV && import.meta.env.VITE_DEV_SERVER_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_URL
: new URL('../renderer/dist/upload.html', 'file://' + __dirname).toString();
const uploadUrl = new URL('../renderer/upload/upload.html', 'file://' + __dirname).toString();
await browserUploadWindow.loadURL(uploadUrl);
return browserUploadWindow;
}
mainWindow.ts
async function createWindow() {
//browserWindow.setVisibleOnAllWorkspaces(true)
// let the dock be on top of the window
const browserWindow = new BrowserWindow({
type: 'desktop',
skipTaskbar: true,
roundedCorners: false,
titleBarStyle: 'hidden',
resizable: false,
hasShadow: false,
show: false, // Use 'ready-to-show' event to show window
height: screen.getPrimaryDisplay().size.height,
width: screen.getPrimaryDisplay().size.width,
enableLargerThanScreen: true,
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, '../../preload/dist/index.cjs'),
},
});
browserWindow.on('ready-to-show', () => {
browserWindow?.show();
if (import.meta.env.DEV) {
browserWindow?.webContents.openDevTools();
}
});
const pageUrl = import.meta.env.DEV && import.meta.env.VITE_DEV_SERVER_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_URL
: new URL('../renderer/dist/index.html', 'file://' + __dirname).toString();
await browserWindow.loadURL(pageUrl);
return browserWindow;
}````
I keep having a problem with ESLint and prettier. It happened several times now that they have conflicting rules and the autoformat on save of one will throw an error on the other.
My problem at the moment is this line, which has been formatted by ESLint:
<v-card outlined min-width="105" :style="{ backgroundColor: cCodeWaterTemp }">
Then prettier throws this error:
88:16 error Replace `·outlined·min-width="105"·:style="{·backgroundColor:·cCodeWaterTemp·}"` with `⏎··········outlined⏎··········min-width="105"⏎··········:style="{·backgroundColor:·cCodeWaterTemp·}"⏎········` prettier/prettier
Basically saying I should change it into this format
<v-card
outlined
min-width="105"
:style="{ backgroundColor: cCodeWaterTemp }"
>
Which ESLint will then again change on save. How can I configure them to have consistent, non conflicting rules? I went through a few tutorials and at the moment my configuration files look like this
Settings.json:
{
"window.zoomLevel": 0,
"vetur.validation.template": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.completion.scaffoldSnippetSources": {
"workspace": "",
"user": "",
"vetur": ""
},
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"git.autofetch": true,
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
browser: true,
},
rules: {
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
$nuxt: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier/vue',
'plugin:prettier/recommended',
'prettier',
],
}},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier/vue',
'plugin:prettier/recommended',
'prettier',
],
}
and editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
}
Any help would be welcome!
Cheers
This is the best way for me.
This works in hot reload too.
In nuxt.config.js add
buildModules: [
...,
['#nuxtjs/eslint-module', {fix: true}]
],
In case someone is stumbling across this looking for an answer, I have figured it out by now. I read that the "extends" part inside eslint should be last so no rule in there gets overwritten. Further, I needed to teach eslint a few tricks regarding vue and prettier which results in this eslint file:
module.exports = {
root: true,
env: {
node: true,
browser: true,
},
rules: {
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
$nuxt: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier/vue',
'plugin:prettier/recommended',
'prettier',
'plugin:vue/base',
],
}
Now i just needed to tell the editor that he can correct code on save (.editorconfig):
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
And here we go. They play nicely for now. I found these pages to be a big help:
Style Guide to find what's wrong
Code page to enable the given set of rules in ESLint
I am using wix/react-native-navigation I am having white flickering screen while using setRoot or push methods in navigation.
I tried setting waitForRender: true , but it docent help .
snippet I tried dosen't work.
animations: {
setRoot: {
waitForRender: true
}
}
I had similar problem on RNN 7.7.0, what helped me is setting the default options
Navigation.setDefaultOptions({
animations: {
push: {
waitForRender: true,
},
pop: {
waitForRender: true,
},
setStackRoot: {
waitForRender: true,
},
showModal: {
waitForRender: true,
},
dismissModal: {
waitForRender: true,
},
},
})
The set-up:
DataTables is using remote data with pagination (AJAX-based)
YADCF is using a Select2 that's grabbing options using AJAX call
Selecting Select2 option triggers grid refresh and filtering (everything is correct)
The problem:
Right after DataTables pulls the updated rowset, YADCF re-runs its intialization routine and Select2 loses its state (i.e. the selected option is no longer selected and is not in the DOM anymore).
This:
becomes this after grid reloads (select2 control re-initialized and lost all options pulled via AJAX, including the one that was selected):
How can I avoid YADCF re-initialization in such case?
Having debugged the problem for a while I found that function appendFilters(...) is called after each grid refresh from this YADCF line:
https://github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js#L3332
which, in turn is fired by DataTables' draw event.
Thanks!
EDIT:
DataTables config array:
var dataTableConfig = {
"autoWidth": false,
"deferLoading": 220,
"pageLength": 5,
"searchDelay": 0,
"searching": true,
"placeholder": null,
"ordering": true,
"paging": true,
"info": true,
"columns": [
{
"name": "company",
"data": {
"_": "company",
"filter": "company",
"display": "company"
},
"visible": true,
"searchable": true,
"orderable": true,
"className": "column_Company"
}
],
"showGlobalSearch": true,
"enableColumnFilter": true,
"columnFilterPosition": "table",
"resetPaging": true,
"select": {
"style": "single"
},
"serverSide": true,
"ajax": {
"url": "/datasource/",
"type": "post"
}
};
YADCF INIT:
colCfg = [
{
"column_number": 2,
"filter_type": "select",
"data": [],
"filter_default_label": "(select..)",
"enable_auto_complete": false,
"sort_as": "alpha",
"sort_order": "asc",
"filter_match_mode": "contains",
"exclude_label": "exclude",
"select_type": "select2",
"select_type_options": {
"width": "300",
ajax: {
url: '/datasource/',
dataType: 'json',
method: 'post',
delay: 750,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 20) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatItem,
templateSelection: formatItemSelection,
escapeMarkup: function(v) {return v;}
},
"case_insensitive": true,
"filter_delay": 500
}
];
yadcf.init(dataTable, colCfg);
I have a LESS file (test.less) with the following class:
.bad_class {
color: #fff
}
I linting and compiling my files with the grunt-recess plugin.
My Grunt options for recess are:
recess: {
options: {
noUnderscores: true
},
test: {
files: {
'assets/css/test.css': [
'assets/less/test.less'
]
}
}
}
When I run recess, it doesn't fail.
I tried without setting the noUnderscores option at all - didn't work.
I even tried setting noUnderscores: false, but that didn't work.
What's am I doing wrong?
Try this
recess: {
build: {
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compile: true,
compress: true,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
}
}
If above is not working try the below code
recess: {
build: {
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compress: false,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
},
compliefile:{
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compile: true
}
}
}