I want to override some settings for specific files.
For example, instead of creating a .prettierrc file at the root of my project, I want to be able to define some global overrides to all files ending with .sol in my settings.json of VS Code.
{
"overrides": [
{
"files": "*.sol",
"options": {
"printWidth": 80,
"tabWidth": 2,
"useTabs": true,
"singleQuote": false,
"bracketSpacing": false,
"explicitTypes": "never"
}
}
]
}
I would like to add the above to my global settings in VS Code.
Prettier doesn't support global overrides intentionally
I was trying to do the same thing as you, and realized after researching the issue that it's intentionally unsupported.
From the docs:
Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.
Also see this response in a closed issue on Github:
Prettier doesn't support global configuration. It's supposed to be configured per project.
Related
I'd like for VSCode to indent automatically indent when I create a newline in the following case:
if(statement)
func();
The default functionality does the following when hitting newline:
if(statement)
func();
This is a longstanding issue in VSCode: https://github.com/microsoft/vscode/issues/43244
I'd appreciate any kind of hack/extension that can accomplish this behavior. There are other instances of indentation getting mangled in the github issue link, but I only really care about this simple case.
Figured out how to do this without installing an extension. There may be a better way that can be done in settings.json but I couldn't find it. You can modify a languages configuration directly from the source, which for me was C:\Program Files\Microsoft VS Code\resources\app\extensions\cpp\language-configuration.json. There is a guide for these files settings. I added the following to my c++ language configuration:
"onEnterRules": [
{
"beforeText": "^\\s*(?:if|while)\\(.*\\)\\s*$",
"action": {
"indent": "indent"
}
},
{
"beforeText": "(?=)",
"previousLineText": "^\\s*(?:if|while)\\(.*\\)\\s*$",
"action": {
"indent": "outdent"
}
}
]
This works, but unfortunately the official c++ vscode extension C/C++ for Visual Studio Code breaks it for some reason.
Below was my initial method of doing this, which breaks too many things to be useful.
"indentationRules": {
"increaseIndentPattern": "^\\s*if\\(.*\\)\\s*$",
"decreaseIndentPattern": "(?!)"
}
The field decreaseIndentPattern must be set (here the regex will never capture anything), otherwise it ignores the indentationRules field (I guess they never tested whether just one would be set?) Note that these edits need to be done with administrative privleges, and I found VSCode pretty convenient for making them. Also these changes do not take effect until VSCode is closed.
So as it turns out I've run into the same issues mentioned in this PR: https://github.com/microsoft/vscode/pull/115454. This fix breaks too much other vscode indentation behavior, such as deindenting after the first properly indented line in if statements.
I have downloaded some exercise files to learn how to use Javascript. I am using Visual Studio Code as the editor and can open the exercise javascript files in the editor. I have installed the extensions Prettier - Code Formatter and ESlint and Live Server and npm-install and advised in the course video. The ESlint extension seems to work ok i.e. when I remove some of the code, errors in the code are underscored and when I move the mouse over the error a pop-up indicates what is missing. However, in the code below I removed the opening and closing brackets around the word 'update' and indented the line which begins with the word 'main.' and remove the semi colon which should follow the first bracket. However, the Prettier extension does not correct these amends, as the video advised it should and I received the error ["ERROR" - 14:55:15] Prettier could not be loaded. See previous logs for more information.
const updateBackpack = (update) => {
let main = document.querySelector("main"); // main is an element
main.innerHTML = markup(backpack);
console.info(update);
};
Do you know why Prettier is not working and how I can get it to work. Please bear in mind I am new to coding and Javascript.
Thanks,
Clive
I think you have the exact same problem as me, while following the exact same course as me :D!
First install prettier, using :
npm i prettier -g
Then configure the VS code to pick that downloaded package.
Here is what I did : Search for 'Prettier Path' in settings > select 'Edit in settings.json' and add the following config :
{
"editor.minimap.enabled": false,
"editor.fontSize": 12,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"liveServer.settings.donotShowInfoMsg": true,
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true
},
"workbench.colorTheme": "Monokai",
"window.zoomLevel": 0,
"editor.columnSelection": false,
"explorer.compactFolders": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.donotVerifyTags": true,
"prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
}
Make sure prettier is installed at the given path : "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
You can make prettier the default also by uncommenting the code : "editor.defaultFormatter": "esbenp.prettier-vscode"
It has my custom settings of visuals, so review those and then set, for beginners try pasting as-is!
I have a component library I am creating with Storybook that needs access to .glb/.gltf files. Based on research, it seemed like the best thing to do here was to use the file-loader Webpack functionality, and augment the storybook main.js as such:
// .storybook/main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-create-react-app"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.(glb|gltf)$/,
use: ['file-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
Then, in my jsx file that references the mesh:
// src/components/MeshLoader.jsx
import MyMeshFile from "./meshes/MyMesh.glb";
import { useGLTF } from "#react-three/drei";
export default function Model(props) {
const group = useRef();
const { nodes, materials } = useGLTF(MyMeshFile);
// Do more stuff with these things
}
When I run compile, everything works, and if I log what MyMeshFile is, I get a path like:
static/media/MyMesh.976a5ad2.glb, as expected.
However, the rest breaks with an error Uncaught Unexpected token e in JSON at position 0, basically on account of the useGLTF function failing at the contents of that file.
It turns out that http://localhost:6006/static/media/MyMesh.976a5ad2.glb is actually a file with the contents of
export default __webpack_public_path__ + "178cb3da7737741d81a5d4f0c2bcc161.glb";
So it seems like there is some redirection happening. If I direct the browser at http://localhost:6006/178cb3da7737741d81a5d4f0c2bcc161.glb, I get the file I want.
My first question, is whether this is the expected behavior here, given the way I have things set up. If so, it seems like I would have to parse the contents of the file path given by Webpack, and use that to get the actual path. That seems to be a bit convoluted, so is there a better way of handling this?
Thanks for the help!
UPDATE:
I have tested with the gltf-webpack-loader loader, by adding the following to the .storybook/main.js file:
...
config.module.rules.push({
test: /\.(gltf)$/, // Removed gltf from file-loader
use: [{loader: "gltf-webpack-loader"}]
})
...
And tried the same thing with a gltf file. I get the same behavior of receiving the "redirect" file instead of the actual one I want.
So it turns out that there is currently a bug with "#storybook/preset-create-react-app" that is causing this issue. Removing that add-on seems to resolve the issue described here, although it does produce a warning that:
Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install `#storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
WARN The built-in preset has been disabled in Storybook 6.0.
What causes the folder name under '_work' to change on a Private Agent?
We are currently using _work/10/s etc. It has used this for the last few builds, but what would cause it to step up to using /11?
I should say we are still in the early days of using VSTS, hence why there are so few builds.
I get the feeling that it is either that we didn't initially perform any cleaning of the work directory, we do now, or that it changes when we change the build definition. Both sound plausible.
Each build definition gets its own folder. This allows for total isolation of source code and build outputs.
You should never rely on hard-coding this path; you can reference a build's working directory with the $(System.DefaultWorkingDirectory) variable.
There is SourceRootMapping folder in the working folder and there are Mappings.json and SourceFolder.json files (SourceRootMapping{guid} folder{build definition id} folder\sourceFolder.json) in this folder.
Mappings.json:
{
"lastBuildFolderCreatedOn": "05/16/2018 13:20:06 +08:00",
"lastBuildFolderNumber": 2
}
A SourceFolder.json:
{
"build_artifactstagingdirectory": "1\\a",
"agent_builddirectory": "1",
"collectionUrl": "https://XXX.visualstudio.com/",
"definitionName": "a",
"fileFormatVersion": 3,
"lastRunOn": "05/16/2018 13:18:06 +08:00",
"repositoryType": "TfsGit",
"lastMaintenanceAttemptedOn": "",
"lastMaintenanceCompletedOn": "",
"build_sourcesdirectory": "1\\s",
"common_testresultsdirectory": "1\\TestResults",
"collectionId": "21136b22-dbe8-4fae-a111-3f8c5b0fed9b",
"definitionId": "285",
"hashKey": "d2545895fec8eea22c60ecc24f6593a986106b80",
"repositoryUrl": "https://starain.visualstudio.com/Scrum2017/_git/cppbase",
"system": "build"
}
So, it’s easy to find that the VSTS agent increase the folder number per to Mappings.json and SourceFolder.json file is used to mapping build definition and its corresponding working folder.
I want to build my Dojo JavaScript code that I have carefully structured into packages into a single JavaScript file. I'm a little confused as to how to do it.
For now I have this:
var profile = {
...
layers: {
'app': {
include: [
'dojo/module1',
'dojo/module2',
...,
'dojo/moduleN',
'package2/module1',
'package2/module2',
...,
'package2/moduleN'
]
}
}
...
};
Do I really have to manually add all the modules to the app layer? Can't I just say "all", or better yet, "all referenced"? I don't want to include the dojo/something modul if I don't use it. Also, in my release folder, that's all I would like to have - one file.
So - can this even be achieved? Clean Dojo automatic build of only referenced modules into a single (minified and obfuscated of course) JavaScript file?
Take a look at the examples in the Layers section of this build tutorial:
It’s also possible to create a custom build of dojo.js; this is particularly relevant when using AMD, since by default (for backwards compatibility), the dojo/main module is added automatically by the build system to dojo.js, which wastes space by loading modules that your code may not actually use. In order to create a custom build of dojo.js, you simply define it as a separate layer, setting both customBase and boot to true:
var profile = {
layers: {
"dojo/dojo": {
include: [ "dojo/dojo", "app/main" ],
customBase: true,
boot: true
}
}
};
You can include an entire "app" in a single layer by including the root of that app (or module). Note that if a module in that app is not explicitly required by that app, it would have to be included manually. See the second example in the Layers section in the above tutorial for an illustration of that.
You can also define packages to include in your layers, if you want to change or customize the layout of your project:
packages: [
{name:'dojo', location:'other/dojotoolkit/location/dojo'},
/* ... */
],
layers: {
'dojo/dojo': { include: ['dojo/dojo'] },
/* ... */
}
You don't have to specify all the modules, if the module you add already has dependencies on others. For example, if you include 'app/MainApplication' to a layer, the builder would include all the modules that app/MainApplication depens on. If your MainApplication.js touches everything in your project, everything would be included.
During the build of a layer, dojo parses require() and define() calls in every module. Then it builds the dependency tree. Nls resources are also included.
In your code, you should name your layer as a file in existing package. In my build, it caused errors when I name a layer with a single word. You should code
var profile =
layers: {
'existingPackage/fileName': {
...
}
}
If you want to have exacltly one file, you have to include 'dojo/dojo' in your layer and specify customBase and boot flags.
Dojo always build every package before building layers. You will always have dojo and dijit folders in your release directory containing minified versions of dojo filies in them.
Just copy the layer file you need and delete everything other.