Vue.js
PyCharm integrates with the Vue.js framework intended for developing user interfaces and advanced single-page applications.
Before you start
Make sure you have Node.js on your computer.
Install and activate the Vue.js repository plugin on the Plugins page as described in Managing plugins.
Creating a new Vue.js application
The recommended way to create a new Vue.js app is Vue CLI, which PyCharm downloads and runs for you using npx.
Of course, you can still download Vue CLI yourself or create an empty PyCharm project and install Vue.js in it.
To create an application
Select from the main menu or click Create New Project on the Welcome screen. The New Project dialog opens.
In the left-hand pane, choose Vue.js.
-
In the right-hand pane:
-
Specify the path to the folder where the project-related files will be stored.
-
In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.
-
From the Vue CLI list, select npx --package @vue/cli vue.
Alternatively, for npm version 5.1 and earlier, install the
@vue/cli
package yourself by runningnpm install --g @vue/cli
in the Terminal Alt+F12. When creating an application, select the folder where the@vue/cli
package is stored. -
To bootstrap your application with babel and ESLint, select the Use the default project setup checkbox.
-
-
When you click Create, PyCharm generates a Vue.js-specific project with all the required configuration files and downloads the necessary dependencies. You can view the progress in the Run tool window.
To create an empty PyCharm project
To install Vue.js in an empty project
Starting with an existing Vue.js application
To continue developing an existing Vue.js application, open it in PyCharm and download the required dependencies.
To open the application sources that are already on your machine
To check out the application sources from your version control
-
Click Check out from Version Control on the Welcome screen or select from the main menu.
-
Select your version control system from the list.
-
In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.
To download the dependencies
Click Run 'npm install' in the popup:
Creating Vue.js components
PyCharm recognizes the .vue file type and provides a dedicated .vue file template for Vue.js components.
To create a Vue.js component
In the Project tool window, select the parent folder for the new component and choose Vue Component from the list.
You can also extract a new Vue.js component from an existing one without any copying and pasting but using a dedicated intention action or refactoring. All the data and methods used in the newly extracted template stay in the parent component. PyCharm passes them to the new component with props and copies the related styles.
To extract a component
-
Select the template fragment to extract and invoke component extraction:
To use the intention action, press Alt+Enter, and then choose Extract Vue Component from the list.
To use the refactoring, choose
from the main menu or from the context menu of the selection.
Type the name of the new component. If this name is already used or invalid, PyCharm shows a warning. Otherwise a new single-file component is created and imported into the parent component.
Coding assistance
In .vue files, PyCharm recognizes script
, style
, and template
blocks. You can use JavaScript and TypeScript inside script
tags, Style Sheet languages inside style
tags, and HTML and Pug inside template
tags.
When you use TypeScript inside a script
tag, PyCharm invokes the TypeScript Language Service for type checking and shows detected errors in the Errors and Compile errors tabs of the TypeScript tool window.
Complete your code
-
By default, PyCharm provides code completion for ECMAScript 6 inside
script
blocks and for CSS insidestyle
blocks. -
Inside the
template
tag, code completion Ctrl+Space and navigation to the definition Ctrl+B for Vue.js components and attributes is available. -
PyCharm also suggests completion for Vue.js properties, properties in the
data
object, computed properties, and methods.
Linting TypeScript in Vue.js components using TSLint
You can lint TypeScript code in your Vue.js single file components using typescript-tslint-plugin.
Because typescript-tslint-plugin
works only with TypeScript that is installed in the current project, make sure the typescript
package from your project node_modules folder is selected in the TypeScript field on the TypeScript page of the Settings/Preferences dialog (Ctrl+Alt+S).
Install and configure typescript-tslint-plugin
-
In the embedded Terminal (Alt+F12), type:
npm install --save-dev typescript-tslint-plugin
-
In the
plugins
property of your tsconfig.json file, type:{ "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } } -
When you are using
typescript-tslint-plugin
, TSLint is running via the TypeScript Language Service so you can disable the TSLint integration with PyCharm to avoid duplicate error reporting.To do that, open the Settings/Preferences dialog (Ctrl+Alt+S), go to , and select Disable TSLint.
Generating code with Vue.js Live templates
With PyCharm, you can use a collection of Live templates for Vue.js adapted from the collection created by Sarah Drasner.
To use a Vue.js Live template
Type the template's abbreviation or press Ctrl+J and select it from the list of available templates.
To expand the template, press Tab.
To move from one variable to another inside the template, press Tab again.
Reformatting Vue.js code with Prettier
Prettier is a tool to format .js, .ts, .css, .less, .scss, .vue, and .json code. With PyCharm, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action. PyCharm adds this action as soon as you install Prettier as a dependency in your project or globally on your computer. Learn more from Prettier.
To reformat code with Prettier
PyCharm can apply the key code style rules from the Prettier's configuration to the PyCharm Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.
To apply Prettier code style rules
In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.
To re-apply the Prettier code style (after you've clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.