Run the following commands: PROJECT_NAME="$(npx project-name-generator -o dashed)" mkdir "$ EOF If you don’t already have one, then begin by creating an empty directory for the project and initializing it with npm.
#SETUP VISUAL STUDIO CODE JAVASCRIPT INSTALL#
Install the extensions: code -install-extension dbaeumer.vscode-eslint code -install-extension esbenp.prettier-vscode code -install-extension Orta.vscode-jest Create a projectīefore we can install Node modules, we need to be in a project directory. To fully integrate ESLint, Prettier, and Jest into VS Code, we need some VS Code extensions. In addition to Visual Studio Code.app, the Homebrew package also installs the command line tool code, which we will use to install our VS Code extensions next. Install the app: brew cask install visual-studio-code VS Code is an extensible source editor that will host our development environment.
Install the runtime: brew install node Install VS Code We use Homebrew to install the Node package, which includes node, npm, and npx. Node is our runtime target as well as the engine powering most of the tools we are going to use. Follow the instructions at brew.sh to install it now. It includes a command, brew, which we will use to install some packages. When we are done, we will take our development environment for a spin by writing a test and debugging it in VS Code. Finally, we will configure the components to work together. Then we will use npm from Node to install the modules. If you already have recent versions of Homebrew, Node, and VS Code installed, you can skip down to the Install VS Code extensions section.įirst, we are going to use brew from Homebrew to install Node and VS Code, and code from VS Code to install the extensions.
#SETUP VISUAL STUDIO CODE JAVASCRIPT MAC#
We will start with a Mac fresh out of the box. The extension reports status inline with the source code and makes it easy to debug failing tests with one click. We will immediately see if any of our tests are passing or failing whenever we save our code. We will install a VS Code extension that runs Jest in watch mode while our workspace is open. It is easy to integrate with the other tools that we’ve chosen and runs very quickly. Jest is a testing framework with a focus on simplicity. We will have continuous testing that runs whenever we modify and save files in our project.
We will also install a VS Code extension and configure it to automatically format-on-save other file formats (JSON, HTML, Markdown, YAML, etc.), too. We will configure ESLint to apply Prettier styles as fixable linting rules and automatically style the code every time we save the code. It eliminates all custom styling by parsing the code to an abstract syntax tree (AST) and then re-printing it according to its own consistent rules. It takes maximum line length into account, causing it to reflow single-line statements into multi-line statements if they get too long, making code more readable.
Prettier is an opinionated code formatter that understands JavaScript code formatting conventions. We will have automatic style-on-save behavior. The TypeScript language service in VS Code provides support for inferring the types in JavaScript files and reporting any type errors it detects, so we will enable that continuous linting feature, too. We will use a VS Code extension to integrate continuous static analysis into the source editor view, and we will configure VS Code to use ESLint to automatically fix everything it can, every time we save our code.
We will configure ESLint to use rules from the popular Airbnb JavaScript Style Guide so that our code follows common standards. It can even fix your code for you (sometimes). For instance, it can detect if you use variables that haven’t been defined. We will have continuous linting and automatic fix-on-save behavior.ĮSLint is a highly configurable static analyzer, able to report problems in your code before it runs. This feature is enabled by default and alone is a great reason to use VS Code for JavaScript development. It includes an IntelliSense feature based on the TypeScript language service, which provides smart completions and parameter info for JavaScript. VS Code is a free, open-source code editor. We will have intelligent code completion. While current versions of Node have experimental support for native modules, by using Sucrase and restricting ourselves to mainstream ES6 syntax in our code, we can target any version of Node all the way back to LTS version 8. We will use the Sucrase compiler to transform our code before running it with Node so that we can write native ES6 modules, instead of traditional Node CommonJS modules. We will have modern JavaScript features, like arrow functions, import/export, async/await, and object rest/spread properties.Īs of the latest LTS version 12, Node has near-complete support for everything in the ES2019 standard - except for native (ES6-style) modules. Before we begin the tutorial, let’s review our five primary goals.
0 kommentar(er)
