In my code I have things like this:
import Something from './Something';
And I would like to normalize it to this:
import Something from './Something';
However, my keyword-spacing rule, although it applies to everything else, doesn't seem to apply to import statements:
'keyword-spacing': ['error', { 'before': true, 'after': true }],
Do I need to use a different rule for this and, if so, which one?
I use ESLint rule no-multi-spaces for the spacing.
"no-multi-spaces": ["error"]
Related
I need some help importing schemas from Visual Studio Code into the Sanity console. I'm importing everything as usual and when Content Studio is successfully compiled I'm still not seeing anything in the Studio
I see Empty Schema every single time. Anyone know how to fix this?
one example of a schema im trying to import
export default{
name:'abouts',
title:'Abouts',
type: 'document',
fields:[
{
name:'title',
title:'Title',
type:'string'
},
{
name:'description',
title:'Description',
type:'string'
},
{
name:'imgUrl',
title:'ImgUrl',
type: 'image',
options: {
hotspot: true,
},
},
]
}
all my types are document
here is the schema.js
// First, we must import the schema creator
import createSchema from 'part:#sanity/base/schema-creator'
// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:#sanity/base/schema-type'
import testimonials from './testimonials'
import about from './about'
// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
// We name our schema
name: 'default',
// Then proceed to concatenate our document type
// to the ones provided by any plugins that are installed
types: schemaTypes.concat([
testimonials,
about
]),
})
I know its super simple but I'm trying to really dig in and get a portfolio started. Thanks so much in advance!
Your schema is named abouts, but you import about in the schema.js-file. The names must match.
as stated above, make sure the names are exact. also under
types: schemaTypes.concat([
make sure each type has a comma after EVERY one, or it wont render it.
hope this helps. 45 min of digging around and testing and this is what fixed it.
so it should look like this:
types: schemaTypes.concat([
about,
testimonials,
brands,
ect....
I am using Math.js to parse and evaluate a mathematical expression, and am following the example at https://mathjs.org/docs/custom_bundling.html#numbers-only as I only need basic number support. "mathjs": "^8.1.1", is listed in my package.json dependencies.
When I run the example code below, I get Module not found: Error: Can't resolve 'mathjs/number':
// use light-weight, numbers only implementations of functions
import { create, all } from 'mathjs/number'
const math = create(all)
Looks like maybe the documentation hasn't caught up. I was able to get this working by changing the line
import { create, all } from 'mathjs/number';
to
import { create, all } from 'mathjs/lib/esm/number';
On this fiddle https://jsfiddle.net/k2c5upfo/1/, extern modules are called using the import method. I don't use node on my project. I'd like to convert all these import files into regular javascript files. How can I built them without using node.js ?
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.118.2/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ShaderPass.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/RenderPass.js';
import { ClearPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ClearPass.js';
import { MaskPass, ClearMaskPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/MaskPass.js';
import { CopyShader } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/shaders/CopyShader.js';
For example, I was able to call 'OrbitControls.js' on a older version of three.js by simply add another file. Can I still use this method ? Thank you
EDIT :
I managed to convert my workflow using es6 modules. I've been wondering if there's a way to only import specific modules. My generated output file has the same weight with theses two different lines.
import {Scene, PerspectiveCamera, WebGLRenderer, CylinderBufferGeometry, MeshNormalMaterial, Mesh} from "../node_modules/three/build/three.module.js";
import * THREE from "../node_modules/three/build/three.module.js";
Is there a way to only have the part of code that I need in my final output ? Thank you.
Using global scripts is actually deprecate since r117. At the end of the year, using ES6 modules is the only way of importing example files.
I don't use node on my project.
Not sure I understand this sentence. The above fiddle is unrelated to node.js. You can import ES6 modules directly in HTML files as long as you put the import statements into script tags that look like so:
<script type="module">
</script>
This approach is also used by the official examples.
I'm using VSCode with prettier plugin and typescript and also tslint.
Leaving aside the convenience to use this configuration, I get a
[tslint] Exceeds maximum line length of 120 (max-line-length)
For a line like this:
import { MyComponent } from "../../some_very_long_path";
I've prettier configured with a print-width of 100, so I was expecting that on Format Document this line would be refactored into something like this:
import { MyComponent }
from "../../some_very_long_path";
or like this:
import {
MyComponent
} from "../../some_very_long_path";
But it is not. Any ideas why?
The documentation says printWidth. The documentation link is here
printWidth: 120
Probably this should solve the problem.
You can add exception for specific regex.
Prettier will have the lead for managing imports and exports, since it has a special way to deal with them.
// edit your tslint.json
"max-line-length": [
true,
{
"limit": 140,
"ignore-pattern": "^import |^export {(.*?)}"
}
],
Prettier is not breaking down imports and the best thing you can do is to remove all the stylistic errors (including the max-line-length) from tslint rules and let Prettier to handle those and tslint the code related ones.
I have project structure like this
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And I'm trying to do stuff below in app.component-index.ts
import { HomeComponent } from 'components/home.component'
Typescript couldn't find this module and throws
error TS2307: Cannot find module 'home.component'
Typescript docs say next:
A non-relative import to moduleB such as import { b } from "moduleB",
in a source file /root/src/folder/A.ts, would result in attempting the
following locations for locating "moduleB":
/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts
So for my case I expect it would be like
/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component
Thanks in advance.
P.S. In my webpack.config I've setted root.resolve to src and everything bundles correct. Typescript-loader prints errors to terminal but everything is bundled and works correctly
So I can guess at the "why" portion of this but I'm relatively new to TypeScript. I have gotten this to work though so I'll try explaining based on that solution as best I can.
What you expect based on the TypeScript Docs would be mostly correct if:
'components/home.component'
were treated as a 'Non-relative import'. I'm fairly certain (based on the solution that worked for me) that TypeScript treats it as an absolute path from the 'compilerOptions.baseUrl' field in your tsconfig.json.
What worked for me was to set it like so:
{
"compilerOptions": {
"baseUrl": ".",
// Other options
}
}
Which essentially tells TypeScript to try and find something like
'components/home.component'
by looking in the same directory as the tsconfig.json file for a directory called 'components' and then to look for a file/directory within it called 'home.component'.
So if your structure looks like:
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And you set baseUrl to "." you would probably need to format your import like
import { HomeComponent } from 'src/home.component'