I'm trying to get familiar with GitHub's Atom and working with JavaScript on a large-scale project. I've been working with tutorials, and the biggest complaint I'm having with Atom is that I can't find a way to get the out of the box autocomplete to work consistently.
For example, I'm following a relatively simple Node.js tutorial, using ES6 syntax, and I have the following code in a core.js file:
export function logMe(message) {
console.log('message: ' + message);
}
In main.js file, I have the following:
import {logMe} from '../src/core'
logMe('Hello, world!');
However, when typing in main.js, I get no autocomplete suggestions for logMe or anything in my core.js file. I feel like there should be either some existing functionality in autocomplete-plus, or another plugin, that allows autocomplete to work across import statements.
Have you tried using atom-ternjs it is Atom integration with the excellent TernJS. You will need to spend a bit of time generating your .tern-project file by going to the Packages menu → Atom Ternjs → Configure Project, but once you have it setup it works very well.
If you don't want to go down the TernJS route, then there is a setting for the autocomplete-plus package called Include Completions from All Buffers:
In my experience it can create a lot of noise and is dependent upon a the other files being open which doesn't scale well.
Related
I have seen a lot of docs websites that have the same layout or same features.
so I am wondering if there is a library used by all these docs.
how do they do this?
./docs -> files.md -> ./docs/files.html
like you see there are a lot of files with .md (sometimes also .mdx)
and they have the same functionalities (see below)
so I am wondering if they use the same js library to generate it?
I tried to search in all the repo, what they are using to generate, but nothing says the name of a library?
is there an npm package or CDN link to that js library?
that can get the .md files inside .docs, and based on the folder structure, create a list on the left with all topics, 2 buttons with next and previous, a button with edit this page on GitHub, etc...
if isn't possible I will do it by scratch, but writing HTML for every doc is time-consuming.
I prefer some markdown fast, build consistent docs, and automatically added to the first-page list on the left.
also the routing thing for getting previous and next elements I need to do it manually and this can be time-consuming.
is there something that does that for me, some web API that gets files .md if I need to do it from scratch?
but still prefering npm package if there is.
Example:
previous and next docs.
react native
deno
lusift
and they have a button with the text EDIT THIS ON GITHUB
Mozilla docs MDN
when scrolling, it will change the color of the currently viewed section
sketch API
but I never find the name of the library.
other functionalities are...
multi-page
and much more...
(I tried to search on Github, but never find it)
it's there a good docs generator for a programming library that I create?
I also google it: https://www.google.com/search?q=javascript+library+documentation
but nothing. the libraries there are for API GET/POST swagger etc...
but I am wanting a library for functions like if you write this function this happen, maybe also code snippet functionality to see what result give you that function.
something similar to StackOverflow. text to HTML (but not need any server-side things comlicated... just keep it simple the files are inside .docs in GitHub, so just simple stuff.
maybe I am writing wrong the google keyterm
I found the solution to this, by using the #evolutionxbox comment.
how to find?
if you want to find what library is used in a GitHub repo,
go to the package.json, there you can find the list of libraries that is used on the project
the name?
in this case, the library used is DOCUSAURUS
link: https://docusaurus.io/
is very simple to config and solves the job!
and is used by
Facebook,
and other big companies like:
supabase
redux
etc...
So, noob question. I currently have a project done in plain Javascript with PIXI.js however I do not get type anotations or Intellisense in my vscode ide. I'm importing the library as the guide shows.
<script src="https://pixijs.download/release/pixi.js"></script>
Then I open the HTML file with Live Server.
My code is starting to grow large and for obvious reasons and I want to have intellisense in my code and type anotations. I also want to migrate all my code to TypeScript, but I dont want to manually compile all of my .ts files everytime i make a change. What is the best way to setup this?
General tips are welcome. My specific situation is a React app, compiled with WebPack, with lots of files. If I want to move a file or folder within the project, is there a good way to do this such that references, such as import & require statements, update automatically?
Bonus points for solutions using Atom or VSCode.
NPM scripts will also work. Thanks.
I used a few text editors with plugins and IDE's during the years, this includes Atom, VSCode, SublimeText, etc. but keep coming back to Jetbrains products and one of the reason is the refactoring capabilities.
Jetbrains dedicated JavaScript IDE, Webstorm does it very well without any additional plugins or hacks.
All you need to do is drag and drop your file or folder to another location and all the relevant imports will be updated (make sure search for references is ticked in the confirmation pop up). This applies to both es6 import and/or common js require().
This is not all, you can rename variables, class, function names, whatever you like, just make sure you doing it by selecting the text, then right click then refactor and rename (you'll see in this menu you can do much more if you want)
Whenever you about to confirm your changes you can select the option in the pop-up that is "search in comments and strings" if you want which is really cool as you can keep your documentation up to date as well.
This official documentation goes more in deep, but generally if you do the above, it will be enough.
I guess if you don't feel confident enough, start up the server, with (create-react-app it will reload every time you make a change as hot reloading is built in) and if something goes wrong with your refactoring you will know it straight away.
Just fyi I am not associated with Jetbrains, I just like the product. Webstorm is not free (however it's very cheap) - go for the 30 day trial version if you don't wish to pay.
UPDATE:
Also note, this feature support both relative and absolute paths as well as any file extensions, so including .*scss etc.
Found a couple of plugins for VSCode. Personally, I haven't used them but they might work for you
https://github.com/cmstead/js-refactor
https://github.com/jakob101/RelativePathRefactor
VS Code has an option to update imports on file move or rename. This feature was enabled with the May 2018 Release. Whenever a file is moved, VS code detects and asks for confirmation to update the import references also.
Visual Studio Code - May 2018
You can control the prompting behavior with the
javascript.updateImportsOnFileMove.enabled and
typescript.updateImportsOnFileMove.enabled settings.
This usually updates the import statements, but it might not update
any strings variables/comments references to the moved files.
NOTE: It worked only for js/ts files. For other types, like scss file, it does not update the #imports.
Most editors/plugins do not support full fledged tracking and refactoring of move/rename actions for all file types, as it becomes more complex and ambiguous when relative paths, absolute paths are used in the same project.
To summarize, for moving a file or folder, there are two instances the references needs to be updated.
In the moved file itself, if any import is using a relative path
Other files which import the moved module/files
I do not think the first is supported in VS Code (and probably in other editors too). The second one is supported in VS Code, but only for js/ts file imports.
I do a lot of JavaScript development in WebStorm, the Jetbrains IDE, and I find myself requiring a lot of external .js files into my current JS file like below.
var page=require("../../../documents/doc.js");
It's easy to require these files if your project is small; but mine is large and spans across a maze of folders/directories and grows even larger as the development team adds to it.
It would be nice to have a plugin for WebStorm IDE which allows to maybe drag and drop the JS file and it automatically writes the require statement like so:
var page=require("../../../documents/doc.js");
Or maybe some way to right click on the .js file I'm trying to import and click require or import if that option exists in WebStorm?
Is there a plugin to achieve this? Hopefully you get what I'm looking for. Please do not suggest other IDEs, I'm mostly interested in a way to achieve this in WebStorm, the IDE by the company JetBrains.
Thanks
I'm new to Atom and JavaScript, Atom seems to be pretty good for web developing.
But to my best knowledge, it seems that there is no Atom package for enabling JavaScript autocomplete.
Does anyone know a package doing this or does Atom have a plan to support JavaScript autocomplete?
Since JavaScript is loosely coupled, providing a working autocomplete solution is not as easy as for statically typed languages like Java. Your best bets with Atom are the following packages:
autocomplete-plus - this is now bundled with Atom as the default autocomplete provider
ternjs - this looks pretty good, but requires some configuration.
I suggest you give these a try.
I think you should go for atom-ternjs
This is java script intelligence for atom
You need to change(Enable) setting for atom-ternjs
Use autocomplete-snippets
Display both autocomplete-snippets and function name
and many more depends on your requirements ...
If you are using modern JavaScript or TypeScript or Node then atom-typescript is good. It uses tsserver (like vscode) which gives autocomplete, go to definition, syntax checking and other ide goodies. By default it's not enabled for JavaScript. Follow the docs to enable for .js files - https://github.com/TypeStrong/atom-typescript/blob/master/docs/faq.md#i-want-to-use-atom-typescript-with-javascript-too. Configuration for tsserver is done by .jsconfig file - https://code.visualstudio.com/docs/languages/jsconfig.
install "autocomplete-plus"
install "atom-ternjs"
create or open any js file in your project
click on Packages -> Atom Ternjs -> Configure Project
below libs enable the item "browser"
scroll down and click on “Save and Restart Server”
Recommended Atom Packages
atom-ternjs:
Adds code intelligence to Atom.
https://atom.io/packages/atom-ternjs
autoclose-html-plus:
Will help you automatically close HTML tags.
https://atom.io/packages/autoclose-html-plus
emmet:
Adds code expansion to Atom.
https://atom.io/packages/emmet
csslint:
Adds CSS error checking abilities to Atom.
https://atom.io/packages/csslint
pigments:
Adds the ability to display colour in Atom code files.
https://atom.io/packages/pigments
language-ejs:
Adds EJS language support to Atom.
https://atom.io/packages/language-ejs
atom-beautify:
Helps to automatically format your code in Atom.