Develop Reference

Align JavaScript imports "from" Statement to be Vertically Aligned

I would like the end result of my imports to be like this, via a tool that can automatically format my code onSave:
import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
import { LambdaStack } from "./lambda-Stack";
import { Construct } from "constructs";
How can I align all of the "from" statements vertically in VS Code? I've looked at both prettier and eslint.

Prettier doesn't care what you want. :-) It's an opinionated tool useful for applying consistency to code within teams (and for avoiding arguments about different formatting styles [although you just get arguments about whether to use Prettier instead]).
If you don't want Prettier's formatting, don't use Prettier. There are other code formatters, some of which offer more control than Prettier does.
You could tell Prettier to ignore each of those import statements:
// prettier-ignore
import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
// prettier-ignore
import { LambdaStack } from "./lambda-Stack";
// prettier-ignore
import { Construct } from "constructs";
or
/* prettier-ignore*/ import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
/* prettier-ignore*/ import { LambdaStack } from "./lambda-Stack";
/* prettier-ignore*/ import { Construct } from "constructs";
For now there's no "block ignore" in Prettier for JavaScript (only for certain select other languages), although there's an open request for one.

Usually, with prettier or eslint you might want to limit printWidth to defined number of caracter per line. So imagine if you have many imports or long module name :
/* You better should break line overhere |----------| */
import { DepA, DepB, DepC, DepD, DepE, DepF, DepG, DepH, DepI, DepJ } from "./some-long-named-module";
import { OnlyOneImport } from "./other-module";
So my answer is not responding to "how can you align 'from' statements?" but it
may open another question 'should you ?'
Here is a common way to indent imports :
// common way to write import with vertical (Automatable)
import {
DepA,
DepB,
DepC,
DepD,
DepE,
DepF,
DepG,
DepH,
DepI,
DepJ
} from "./some-long-named-module";
import { OnlyOneImport } from "./other-module";
Here is the eslint rule to auto indent your code : https://eslint.org/docs/latest/rules/object-curly-newline
example for object-curly-newline rule in eslint:
# .estlintrc.json
{
...
"rules": {
...
"object-curly-newline": [
"error",
{
"consistent": true,
"multiline": true
}
]
}
}
PS:
Here some example of how I use it
# .estlintrc.json
{
"root": true,
"extends": [
"airbnb-base", // See https://www.npmjs.com/package/eslint-config-airbnb
"airbnb-base/whitespace",
"plugin:jest/recommended", // See https://www.npmjs.com/package/eslint-plugin-jest
"prettier" // See https://github.com/prettier/eslint-config-prettier
],
"env": {
"jest/globals": true
},
"plugins": [
"jest",
"...whatever-you-want"
],
"ignorePatterns": [
"dist/",
"node_modules/",
"...whatever-you-want"
],
"rules": {
"no-restricted-syntax": [
"error",
"WithStatement",
"BinaryExpression[operator='in']"
],
"no-console": [
0,
{
"allow": [
"info",
"warn",
"error"
]
}
],
"quotes": [
"error",
"single",
"avoid-escape"
],
"object-curly-newline": [
"error",
{
"consistent": true,
"multiline": true
}
],
"...whatever-you-want"
}
}
# .prettierrc
{
"printWidth": 80,
"trailingComma": "es5",
"useTabs": false,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"bracketSpacing": true,
"bracketSameLine": false,
"proseWrap": "preserve",
"arrowParens": "avoid",
"endOfLine": "lf",
"parser": "babel"
}

eslint no-use-before-define rules does not work in node.js

I use node.js 12.3.0 and i had installed eslint 7.0.0 by npm.
So i wrote the .eslintrc.js like below.
module.exports = {
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"semi": ["error", "always", {"omitLastInOneLineBlock": true }],
"no-shadow-restricted-names" : "error",
"no-unused-vars": ["warn", { "vars": "all" }],
"no-redeclare": ["error", { "builtinGlobals": true }],
"no-use-before-define": ["error", { "functions": true, "classes": true, "variables": true }]
}
};
As you know, i already added "no-use-before-define" but it didn't work.
All another eslint rules are worked fine but only "no-use-before-define" didn't check anythings.
Here is my examples js file.
let c = qwertqwert(); //As you know qwerqwert is not defined. I want to check this.
a = 123123; //I don't want to allow assign any value to variable before declaration.
b = asdfafasfdasdfas; //Also i need to check any undefined variable or functions are used.
Does "no-use-before-define" can check this?
It seems only can check when i use the variable or function before define or declaration.
Func(); //I use(call) first.
//But the define statement is after.
function Func()
{
return 10;
}
Above code had checked fine by eslint but it is meaningless.
Because i want let eslint to check usage of undefined functions or value.

if you define eslint should show the error you should write a rule like
if you don't want rule you can remove it or skip rule by file
"no-use-before-define": [
"error",
{
"functions": false,
"classes": false,
"variables": false
}
],
NOTE :- i am using extension of airbnb
extends: [
'airbnb-base',
],
it works for me
node js :- 14.17.6
eslint :- 7.12.1+
and if function is not defined then it shows

How to setup Atom JS autocomplete?

I'm trying to get autocomplete suggestions from my Atom code editor. When I'm trying doc I expecting document and when I typing document.que I'm expecting Atom would show me .querySelector(). And it's doesn't happening. I've installed these packages to resolve the issue:
atom-ternjs
After that I still doesn't get autocomplete for doc or document. My -tern.project file looks like this:
{
"ecmaVersion": 6,
"libs": [],
"loadEagerly": [],
"dontLoad": [
"node_modules/**"
],
"plugins": {
"doc_comment": true,
"complete_strings": {
"maxLength": 15
},
"node": {
"dontLoad": "",
"load": "",
"modules": ""
},
"modules": {
"dontLoad": "",
"load": "",
"modules": ""
},
"es_modules": {}
}
}
So, how do you autocomplete JS in Atom? Interesting thing - notice if I create array and try array. then Atom gives me suggestions like .pop .push and others but why it doesn't give me a document. => .querySelector() and other for DOM manipulation.
My Atom config.cson:
"*":
core:
telemetryConsent: "no"
editor:
fontSize: 13
"exception-reporting":
userId: "bla-bla-bla"
"linter-ui-default":
showPanel: true

I found the answer. Need to activate:
Packages => Atom Ternjs => Configure Project => and here need to checkmark for Browser option.

JSDOC: Tutorial config conf.json having parsing error

I followed all the steps mentioned and still I get "Unexpected token ? in JSON at position 0" error when I have a conf.json file in my tutorials folder. If I remove the conf.json, it works perfect. But I need the conf.json.
I have a tutorials folder with .md files and a conf.json file which looks like this
{
"name_of_tutorial": {
"title": "Test Title"
}
}
and in my jsdoc.json file looks like this
{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc", "closure"]
},
"opts": {
"recurse": true,
"encoding": "utf8",
"destination": "./docs",
"readme": "./Content/tutorials/project_README.md",
"tutorials": "./Content/tutorials"
},
"source": {
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": [
"plugins/markdown"
],
"templates": {
"cleverLinks": false,
"monospaceLinks": false,
"default": { }
}
}
Looks like there is a problem when reading the file and parsing it as json.
Can you help me fix it?

Setting up Sencha extjs project

I am attempting to set up a Sencha extjs 6 project. I would like to be able to have both the modern and classic packages available. I'm following this set-up tutorial, but am not finding it very helpful.
If my understanding is correct, I should be able to have one app that accessible as both a desktop and mobile site. This is great and works for the uncompiled path (my app is in the folder root/sencha) mysite.com/sencha. However, if access the root site it also gives me the uncompiled path instead of using the build app.js.
My index page is at root/layouts/index.html. My extjs app is in root/sencha.
The relevant parts of my app.json are:
...
"indexHtmlPath": "../layouts/index.html",
"production": {
"output": {
"page": {
"path": "../../../../layouts/index.html",
"enable": false
},
"appCache": {
"enable": true,
"path": "cache.appcache"
},
"microloader": {
"path": "microloader.js",
"embed": false,
"enable": true
}
},
"loader": {
"cache": "${build.timestamp}"
},
"cache": {
"enable": true
},
"compressor": {
"type": "yui"
}
},
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
...

As pagep suggested you just deploy on your production server the content of the build/production directory and not the source code. That way you only deploy the minimized and compressed files (classic/app.js, classic/resources/YourApp.css, modern/app.js, modern/resources/YourApp.css, etc...).