Project structure
I have the following project structure:
/
| - .vscode/
| - - - - settings.json
|
| - packages/
| - - - - app/
| - - - - - - index.js
| - - - - - - package.json
| - - - - website/
| - - - - - - .vscode/
| - - - - - - - - settings.json
| - - - - - - index.html
| - - - - - - styles.scss
| - - - - - - package.json
|
| - package.json
|
As you can see, I have two vs-code setting files: One at the root, and another one inside the website workspace.
Root vs-code settings
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": false,
"editor.tabSize": 2,
"editor.rulers": [
80,
120
],
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.validate": [
"javascript"
],
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"javascript.updateImportsOnFileMove.enabled": "always",
}
Website workspace vs-code settings
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.configFile": ".stylelintrc",
"stylelint.snippet": [
"css",
"scss"
],
"stylelint.validate": [
"css",
"scss"
],
"stylelint.packageManager": "yarn"
}
Questions
I know that /.vscode/settings.json is merged with my vs-code default settings. But...
Is /packages/website/.vscode/settings.json merged with /.vscode/settings.json
As you can see, there is some code repetition in both configs:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
and
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
If I remove "source.fixAll.eslint": true, from the /packages/website/.vscode/settings.json, will editor.codeActionsOnSave.source.fixAll.eslint be extended from /.vscode/settings.json?
At the time of this writing, VS Code settings files cannot reference other settings files to extend/inherit settings from them, and they do not automatically extend/inherit settings from .vscode/settings.json files in parent folders.
See the highly popular feature request issue ticket on the VS Code GitHub repo: Add ability to extend from other settings files #15909. You can show your support for the feature request by giving a thumbs up reaction to the issue. But please don't make a "me too" comment. "me too" comments generally come off as annoying to repo maintainers because they clutter up discussion and don't contribute anything of significant value.
As you already know, the settings that apply to a workspace use the worspace folder's .vscode/settings.json file and fallback to the user's settings.json file. But there also a middle layer between that: If you use multi-root workspaces, the middle layer is the multi-root workspace's .code-workspace file, where you can put settings that apply to all workspace roots in the multi-root workspace.
Bonus info:
There's also this issue ticket: Allow folder settings to cascade / be inherited #111884, which for some reason got close as a duplicate of this one: Monolithic structure, multiple project settings #32693, which seems to be more about a feature like multi-root workspaces.
The relatively newer "Profiles" feature has a somewhat anaolgous/related feature request here: Profiles: Extend from Default Profile #156144.
There are only 3 ways how to configure VSCode. Order is by precedence (first one have highest priority):
1.) Project .vscode/settings.json
2.) Project workspace e.g. .vscode/team.code-workspace
3.) VSCode user settings.json
As you can see we store team.code-workspace also in .vsode folder of project. We are sharing team settings in commited file .vscode/project.code-workspace and if developer need some project-specific settings just for himself he can use gitignored .vscode/settings.json which has precedence.
So if you want to use in project some option with another value then default in user settings.json you must override it in project *.code-workspace. If you want to use in project for some option with another value then in project *.code-workspace. you must override it in project settings.json
Related
I am new to electron. I have an angular application wrapped in electron that I want to build the package/installer using electron-builder. I am using electron-builder-config.yaml file to build the installer.
I would like to know how do I read values from .env environment file into electron-builder-config.yaml file ?
I want to set the version of the package that is generated by command electron-builder -w --publish always -c ./builder-config.yaml.
I did try using buildVersion property but the problem is that there is an installer.nsh file that needs to run as part of nsis installer to set the path and that file uses ${version}.
There is very little documentation on environment variables usage in electron-builder-config.yaml
Here is my electron-builder-config.yaml
directories:
output: ./dist/electron
buildResources: ./electron/build
app: ''
electronVersion: X.Y.Z
appId: com.sample.app
copyright: "Copyright © 2020 ${author}"
productName: TestApp
forceCodeSigning: true
artifactName: "${productName}-${os}-${version}.${ext}"
files:
- "**/dist/electron/*"
- "**/electron/*"
asar: true
compression: maximum
mac:
category: public.app-category.reference
icon: "./icon-file.icns"
publish: [{
"provider": "generic",
"url": "http://localhost:8080"
}]
dmg:
background: "./build/sample.jpg"
icon: "./build/nw.icns"
iconSize: 96
contents:
- x: 650
y: 230
type: link
path: /Applications
- x: 350
y: 230
type: file
win:
cscLink: "./somelink.pfx"
cscKeyPassword: "XXXXXX"
target: [nsis]
icon: "./appinfo.ico"
publish: [{
"provider": "generic",
"url": "http://localhost:8080"
}]
msi:
shortcutName: "TestApp - ${version}"
createDesktopShortcut: true
createStartMenuShortcut: true
nsis:
include: "./installer.nsh"
installerIcon: "./appinfo.ico"
uninstallerIcon: "./appinfo.ico"
packElevateHelper: true
allowToChangeInstallationDirectory: true
perMachine: true
oneClick: false
createDesktopShortcut: true
createStartMenuShortcut: true
shortcutName: "TestApp - ${version}"
guid: "someguid"
npmRebuild: true
nodeGypRebuild: false
Also, I am not sure about the macro ${ext}. From where does this electron-builder-config.yaml file is picking up this value ? Even in the documentation for file-macros, the version does not have the clear definition. Any suggestions ?
I got it figured out. In case someone else is looking for the answer to this question, here is how I got it working.
Step 1: Create a file by the name electron-builder.env at the root level where your package.json resides. Please make sure that you keep the file name as electron-builder.env
Step 2: Define the variables that you would like to inside the electron-builder.env file, for example ELECTRON_BUILD_VERSION=99.99
Step 3: Inside your builder-config.yaml file, access the environment variable with the syntax {env.ELECTRON_BUILD_VERSION}
There you go. Have fun. Happy Coding 😊
Using Intellij Idea 15.0.2 on Ubuntu 15.10 and trying to configure ESLint to work.
Followed the instructions on Jetbrains' site, but no dice.
Here's a screencap of my settings at languages&frameworks > javascript > code quality tools > ESLint. And here's a screencap of my nodejs/npm settings within IntelliJ.
And my .eslintrc file, in the root project directory:
{
"extends": "airbnb",
"rules": {
"comma-dangle": 0
}
}
Here's a snip from /index.js that produces no errors or warnings in IntelliJ:
var superman = {
default: { clark: "kent" },
private: true
};
Here's the output when I run eslint index.js from the terminal:
4:1 error Unexpected var, use let or const instead no-var
5:5 error Expected indentation of 2 space characters but found 4 indent
5:23 error Strings must use singlequote quotes
6:5 error Expected indentation of 2 space characters but found 4 indent
Note: I believe ESLint is running, since before I changed my .eslintrc to the AirBNB version, I was using an .eslintrc from Github that threw a number of ESLint errors in IntelliJ (that is, errors in the .eslintrc file itself, not my code).
Once I fixed those errors, though, the plugin quieted down and didn't yell at me when I tested it by producing mistakes.
JetBrains (Idea, Webstorm) settings
File > Settings > Plugins > Browse repositories... > Search: eslint > Install > Restart WebStorm
File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
After that it should work like this:
ESLint config
ESLint doesn't come with a config. You have to create your own or use a preset:
npm install --save-dev eslint-config-airbnb eslint
Then in your .eslintrc
{
"extends": "airbnb"
}
You can also selectively disable/modify some rules from preset (0 - disable rule, 1 - warning, 2 - error):
{
'extends': 'airbnb',
'rules': {
'indent': [2, 'tab', { 'SwitchCase': 1, 'VariableDeclarator': 1 }],
'react/prop-types': 0,
'react/jsx-indent-props': [2, 'tab'],
}
}
Read: Turning off eslint rule for a specific line.
If you don't want to use airbnb config (most popular javascript style guide) you can create your own. Here is the instruction for react: How to config ESLint for React on Atom Editor.
To create your own preset you have to create npm package named eslint-config-myname and then use 'extends': 'myname', http://eslint.org/docs/developer-guide/shareable-configs
You can use command line to check if eslint works:
./node_modules/.bin/eslint .
You may though exclude some files from eslinting (node_modules are excluded by default) in .eslintignore:
bundle.js
There is also a --fix switch for eslint.
.editorconfig
Good companion for ESLint is editorconfig. Here is an example which works in JetBrains products:
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
# don't use {} for single extension. This won't work: [*.{css}]
[*.css]
indent_style = space
indent_size = 2
I also have a github repository which already has these files set https://github.com/rofrol/react-starter-kit/
Based on this https://www.themarketingtechnologist.co/how-to-get-airbnbs-javascript-code-style-working-in-webstorm/
More here https://www.jetbrains.com/webstorm/help/using-javascript-code-quality-tools.html
I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.
I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).
I am having trouble building a layer for my web app. I have Node installed and I can use the packages directive to compress all my files but I cannot get a layer to build despite several days of trying every possible path and directive combination I can think of.
Here is a profile I thought should work:
var profile = {
// point basePath to ~/dev
basePath: "/Users/ferg/Dropbox/webdev/x-wing_squadron_builder/www/js/",
// point releaseDir to ~/dev/myapp-deploy
releaseDir: "./",
action:"release",
optimize:"shrinksafe",
stripConsole: "normal",
async: 1,
layers: {
"squad_builder_deploy/squad_builder_all": {
include: [
"squad_builder/SquadList.js",
"squad_builder/SquadPane.js" // there are actually many more files, this is just for testing...
]
}
},
resourceTags: {
amd: function(filename, mid) {
return /\.js$/.test(filename);
}
}
}
My directory structure is:
www
- js
- dojo_toolkit
- dojo
- dijit
- dojox
- squad_builder (my app)
- squad_builder_deploy (where I want to generate my layer)
Running this in the terminal:
buildscripts ferg$ ./build.sh load=build profile=../../../squad_builder/squad_builder -r
Gives me:
processing profile resource /Users/ferg/Dropbox/webdev/x-wing_squadron_builder/www/js/squad_builder/squad_builder.profile.js
discovering resources...
starting reading resources...
starting processing raw resource content...
starting tokenizing resource...
starting processing resource tokens...
starting parsing resource...
starting processing resource AST...
starting executing global optimizations...
starting writing resources...
error(303) Missing include module for layer. missing: squad_builder/SquadList.js; layer: squad_builder_deploy/squad_builder_all
error(303) Missing include module for layer. missing: squad_builder/SquadPane.js; layer: squad_builder_deploy/squad_builder_all
starting cleaning up...
waiting for the optimizer runner to finish...
starting reporting...
Report written to /Users/ferg/Dropbox/webdev/x-wing_squadron_builder/www/js/build-report.txt
Process finished normally.
errors: 2
warnings: 0
build time: 1.734 seconds
What am I doing wrong?
Module IDs are not file names. You should not have extensions on SquadList or SquadPane. You also should not be generating layers that aren’t files that already exist within your application. A layer is just an existing module file that contains many additional modules for efficiency.
I'm building multiple applications using Durandal JS. All those applications are located on the same server under the same document root and share some common code. For example they all use the same model & view for login.
How can i reuse/share the login model & view in all those applications without just copy & pasting the files to the projects?
I already tried something with the following folder structure:
ProjectsDir/Project1/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/Project2/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/ProjectsBase/app/models/Login.js
/views/Login.html
This way it would be possible to reference the same login model & view in my ProjectsBase from all other projects by setting the correct route to it in the respective shell.js. This route could look something like this:
router.map([
{
url: 'Login',
moduleId: '../../ProjectsBase/app/models/Login',
name:'Login',
visible: true
},
{
url: 'Main',
moduleId: 'models/Main',
name:'Main',
visible: true
}
]);
This works as expected during debugging but building the production version with the durandal optimizer unfortunately doesn't work.
Actually building does work (it produces the main-built.js just fine) but when i launch the site with the production file referenced i get the following error:
Uncaught Error: undefined missing durandal/../../../MPBase/durandal-app/models/Login
I'd really appreciate any ideas on how I could make the built production file work with the setup I described above.
Of course I'm also open for other ideas on how to make models & views reusable/sharable between multiple projects.
Thanks
With some help from Durandals Google Group I found a solution.
It's not possible to use the provided optimizer.exe but it's quite easy to create a custom r.js config which can handle the setup I described in the question:
First of all I ran the optimizer.exe which created a basic config file (app.build.js) that i used as a starting point.
This config file automatically included all necessary files from the project itself (e.g. Project1).
The only things that are missing in this config file are the references to my shared code (the login files from the ProjectsBase directory). Therefore I added them manually along with a new path.
Custom app.build.js (3 changes highlighted with a comment, the rest is how it was built from the optizimer.exe):
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text",
"projectsbase": "../../ProjectsBase/" // New path to folder with shared files
},
"baseUrl": "ProjectsDir\\Project1\\app",
"mainConfigFile": "ProjectsDir\\Project1\\app\\main.js",
"include": [
"main",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"projectsbase/app/models/Login", // Include for login model
"models/Main",
"models/Shell",
"text!projectsbase/app/views/Login.html", // Include for login view
"text!views/Main.html",
"text!views/Shell.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "ProjectsDir\\Project1\\app\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Now I only had to update my Shell.js to use the correct routes to the Login model & view by also adding a path to requirejs and using it correctly when setting the routes:
Add path at the very beginning of Shell.js:
requirejs.config({
paths: {
'projectsbase': '../../ProjectsBase/'
}
});
Set correct routes in activate method of Shell.js:
router.map([
{ url: 'Login', moduleId: 'projectsbase/app/models/Login', name:'Login', visible: true },
{ url: 'Main', moduleId: 'models/Main', name:'Main', visible: true }
]);
Now i can build my main-built.js which bundles & minifies all relevant files by opening the node js command line, browsing to the directory where the r.js config file is and create the build (the main-built.js) with the following command:
node r.js -o app.build.js
This way everything is included correctly when I'm working with the debug files and it's also working with the build main-built.js which also includes my shared files from the ProjectsBase.