I used vue + eslint + prettier and for longer html class="" attributes prettier was splitting it into several line.
split class
Now prettier just puts it in single line and not splits long classes. single line class
When working with tailwindcss it's not efficient for me. I was not able to reset this functionality can anyone help me or is this feature fully removed from prettier?
My prettierrc file: "
{
"printWidth": 80,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"useTabs": true,
"tabWidth": 2
}
My settings.json:
{"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},}
I've got a dependency I'd like to shim on my react-native project. I currently have the following code on my babel.config.js file:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
],
};
};
I've found the extension babel-plugin-module-resolver which seems to be helpful (any other alternative would work too) and tried to follow their examples but they didn't work
I've tried the following:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ["./src"],
alias: {
'#dependency/to-shim': 'path/to-shimmer',
},
},
],
],
};
};
but that doesn't work
I've got the same error.
The code when running works correctly.
The problem is with build. The path still absolute.
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#services': './src/services',
},
},
],
'react-native-reanimated/plugin',
],
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#services*": ["./src/services"]
},
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["esnext"],
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noStrictGenericChecks": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
"target": "esnext"
},
"include": ["src"],
"exclude": [
"node_modules",
"commitlint.config.js",
"metro.config.js",
"jest.config.js",
"babel.config.js"
]
}
screenshot - should be relative after build
I'm using prettier to lint and fix my formatting of .sol files.
But for some reason, anytime it encounters pragma experimental ABIEncoderV2;, it transforms it to pragma experimental ;.
Why's it doing this?
My .prettierrc.js:
module.exports = {
overrides: [
{
files: "*.sol",
options: {
bracketSpacing: false,
printWidth: 145,
tabWidth: 4,
useTabs: false,
singleQuote: false,
explicitTypes: "always",
},
},
{
files: "*.ts",
options: {
printWidth: 145,
semi: false,
trailingComma: "es5",
},
},
],
};
I'm having a hard time figuring out how to access item properties from within a v-data-table slot with a specific JSON format.
The items bound to the v-data-table have a nested property called "technicals" which also contains several nested properties for each interval like "5m", "15m" etc...
I generated the v-data-table headers with a computed property and everything is displaying fine but now I want to access the data with a slot inside the table to manipulate the boolean values of true/false with some additional styling etc. I just can't find out how to access the properties in the slot tag.
The values assigned to the headers are of this structure
Object.technicals.side.interval.value
Where "side" and "interval" are component props stored in the data object.
{
"market": {
"id": "xyx"
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
}
}
}
<v-data-table
:headers="headers"
:items="tickerStats"
:sort-by.sync="sortBy"
:sort-desc.sync="isDescending"
>
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
<v-chip>doSomething</v-chip>
</template>
</v-data-table>
I need to get access from this line but I can't access the props from the component (side and interval) and can't access the other things either by trying.
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
It only works accessing the market ID like so, but I don't need to modify the ID column.
<template v-slot:item.market.id="{ item }">
UPDATE
Here is how I generate the headers
headers() {
let fnc = this.functions.filter(f => {
return f.type == this.side;
});
let headers = [
{
text: "MARKET",
align: "start",
sortable: true,
value: "market.id",
type: String
}
];
let side = this.side;
for (let i = 0; i < fnc.length; i++) {
headers.push({
text: fnc[i].name,
align: "start",
sortable: true,
type: Boolean,
value:
"technicals[" +
this.side +
"]." +
this.interval +
"[" +
fnc[i].name +
"]"
});
}
return headers;
}
Function is an array of objects of this format
{
name: "RSI_OVERSOLD",
formatted_name: "RSI OVERSOD"
}
This is the structure of one item inside the items array used for: items from which I only want to display the market.id and the technicals for the given side and interval passed as a prop to the component.
{
"id": "ETHUSDT",
"ticker": {
"exchange": "Binance",
"base": "ETH",
"quote": "USDT",
"timestamp": 1613375545712,
"last": "1753.52000000",
"open": "1671.49000000",
"high": "1847.54000000",
"low": "1655.67000000",
"volume": "935312.43155000",
"quoteVolume": "1656379605.10542940",
"change": "-82.03000000",
"changePercent": "-4.469",
"bid": "1753.37000000",
"bidVolume": "5.70749000",
"ask": "1753.52000000",
"askVolume": "0.21402000"
},
"market": {
"limits": {
"amount": {
"min": 0.001,
"max": 10000
},
"price": {
"min": 0.01,
"max": 100000
},
"cost": {
"min": 1
},
"market": {
"min": 0.001,
"max": 10000
}
},
"precision": {
"base": 8,
"quote": 8,
"amount": 3,
"price": 2
},
"tierBased": false,
"percentage": true,
"taker": 0.001,
"maker": 0.001,
"id": "ETHUSDT",
"lowercaseId": "ethusdt",
"symbol": "ETH/USDT",
"base": "ETH",
"quote": "USDT",
"baseId": "ETH",
"quoteId": "USDT",
"info": {
"symbol": "ETHUSDT",
"pair": "ETHUSDT",
"contractType": "PERPETUAL",
"deliveryDate": 4133404800000,
"onboardDate": 1569398400000,
"status": "TRADING",
"maintMarginPercent": "2.5000",
"requiredMarginPercent": "5.0000",
"baseAsset": "ETH",
"quoteAsset": "USDT",
"marginAsset": "USDT",
"pricePrecision": 2,
"quantityPrecision": 3,
"baseAssetPrecision": 8,
"quotePrecision": 8,
"underlyingType": "COIN",
"underlyingSubType": [],
"settlePlan": 0,
"triggerProtect": "0.0500",
"filters": [
{
"minPrice": "0.01",
"maxPrice": "100000",
"filterType": "PRICE_FILTER",
"tickSize": "0.01"
},
{
"stepSize": "0.001",
"filterType": "LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"stepSize": "0.001",
"filterType": "MARKET_LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"limit": 200,
"filterType": "MAX_NUM_ORDERS"
},
{
"limit": 100,
"filterType": "MAX_NUM_ALGO_ORDERS"
},
{
"notional": "1",
"filterType": "MIN_NOTIONAL"
},
{
"multiplierDown": "0.8500",
"multiplierUp": "1.1500",
"multiplierDecimal": "4",
"filterType": "PERCENT_PRICE"
}
],
"orderTypes": [
"LIMIT",
"MARKET",
"STOP",
"STOP_MARKET",
"TAKE_PROFIT",
"TAKE_PROFIT_MARKET",
"TRAILING_STOP_MARKET"
],
"timeInForce": [
"GTC",
"IOC",
"FOK",
"GTX"
]
},
"type": "future",
"spot": false,
"margin": true,
"future": true,
"delivery": false,
"active": true
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
}
},
"sell": {
"1m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
}
}
}
},
horizontal scroll in datatable.net not aligning headers with actual column data on scrolling.
On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.
My Code sample ::--------
$('#abc').dataTable({
"aaData": userContactGridData,
"bAutoWidth":false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
{ "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
{ "sWidth": "200px", "aTargets": ["userName"] },
{ "sClass": "icon", "aTargets": ["icon"] },
{ "sClass": "gearIcon", "aTargets": ["gearIcon"] },
{ "sClass": "userName", "aTargets": ["userName"] },
{ "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
{ "bVisible": false, "aTargets": ["adminRoleIcon"] },
],
"sDom": 'C<"H"Tfr>t<"F"ip>',
"iDisplayLength": 6,
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[2, "asc"]], // sort by name by default
"sScrollX": "100%",
"bScrollCollapse": true
});
Try adding sScrollX: 100% and bScrollCollapse: true
Then your code look like as below
var oTable;
$(document).ready(function () {
oTable = $("#yourElementName").dataTable({
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
{ "aTargets": ['_all'], "bSortable": false}],
"aaSorting": [[0, 'asc']]
});
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 10);
});