This is the initial repository for NotePlan app plugins, available from release v3.0.22 (Mac & iOS).
The plugins work through Command Bar Plugins
for example:
If you are a user and have plugin ideas, submit them here or ask in the NotePlan Discord community's #plugin-ideas
channel.
If you are a developer and want to contribute and build your plugins, see the plugin writing documentation and discuss this with other developers on Discord #plugin-dev
channel. Your might want to consult this good modern JavaScript tutorial.
- Make sure you have a recent version of
node
andnpm
installed.brew install node
should do the trick. - Run
npm install
from the root of your local GitHub repository fornoteplan/plugins
. This will install all the dependencies. - Run
npm run autowatch
from the same root. The first time you run the script it will ask you for the full path to you Plugins folder and if you provide it, it will automatically copy the final js file and the plugin.json file in there automatically.
This includes setting up eslint (for checking code conventions), flow (for type checking), babel (a JS compiler), and rollup (for bundling multiple source files into a single release). Each have their own configuration files in the root; they can be overridden if needed by placing a more specific config file in the respective plugin's folders.
These are the most common commands you will use while developing:
npm run autowatch
and your multi-file JS plugins will be compiled for you, and optionally be copied to your running NotePlan instance for testing. In most cases you shouldn't then need to run the following individual commands, but they're listed for completeness.npm run build
: Will build all the plugins into single files (where needed)npm run watch
: Will watch all files for changes and automatically compile them into single javascript files (where needed)npm run typecheck
: Will typecheck all the javascript files withFlow
. Only files with a// @flow
comment are checked.npm run fix
: Will lint and autoformatnpm run test
: Will lint and typecheck all Javascript files and report, but not fix anything
You may find these commands useful too:
npm run build:nmn.sweep
: Will build thenmn.sweep
plugin to a single filenpm run build:nmn.Templates
: Will build thenmn.Templates
plugin to a single filenpm run watch:nmn.sweep
: Will build thenmn.sweep
plugin to a single file and automatically repeat when a file changes.npm run watch:nmn.Templates
: Will build thenmn.Templates
plugin to a single file and automatically repeat when a file changes.npm run lint
: Will run ESlint on the entire reponpm run lint-fix
: Will run ESlint on the entire repo and fix whatever it can automatically fixnpm run format
: Will autoformat all Javascript files.
- Install extensions for the following tools:
flow
"Flow Language Support" by flowtypeeslint
"ESLint" by Dirk Baeumerprettier
"Prettier - Code formatter" by Prettier
- Update Settings:
- Set
prettier
to be the default formatter for js files.- You can open the Command Bar using
CMD+SHIFT+P
and then search forFormat Document
. - When you do this, you may get asked for a formatter of choice. Choose "Prettier"
- If it asks you if this should be your default for all JS files, choose Yes.
- You can open the Command Bar using
- Restart the editor to ensure the plug-ins are working.
- You should see type errors when you make those
- You should see lint errors when you format code wrong
- You should see your code get autoformatted when you save
- Make sure to open this folder directly in VSCode and not the entire repo as the ESLint plug-in can be annoying about that
- Install the following extensions using Package Control
SublimeLinter
This allows various linters to workSublimeLinter-eslint
SublimeLinter-flow
jsPrettier
Babel
Syntax definitions for ES6 Javascript and React JSX extensions
- Configure your packages:
- Open a
.js
file - From the View menu, select Syntax → Open all with current extension as… → Babel → JavaScript (Babel)
- Open the package settings for
jsPrettier
and add"auto_format_on_save": true,
- Open a
Noteplan plugins need to be packaged as a single Javascript file, but that's not always a nice way to work. So we use tools to package up multiple files into one.
After making any changes, you can simply run npm run build
.
Even better, you can run npm run watch
and it will automatically watch the source files for changes and continuously
compile the final plugin file.
If you don't have an editor set up to lint on the fly for you, run npm run test
and it will give a list of problems
to fix.