Pick A Linter Formatter Config

Posted on  by admin
Modified11 months ago. When creating a new project with Vue CLI v4.0.5 with checking the options for TypeScript and Linter / Formatter, you are given pre-configured options for linting and formatting:.
I want to use Airbnb rules for ESLint with Prettier (format-on-save), with TypeScript parser and Vue CLI v4.
These configurations should also work well with Vetur extension for VS Code.
How to configure this combination of tooling?
Note that this is not a dupe question.
There are similar questions but not with these exact requirements for Vue CLI4, TypeScript, ESLint, Airbnb, Prettier, and working along with Vetur / VS Code.
EDIT 2020/02 - The nature of this challenge has recently changed considerably, so I've opened and self-answered an another question: How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?
88 gold badges5757 silver badges103103 bronze badges.
103103 bronze badges.
According to a blog post I found [1] these steps should make it sure it works:.
Download the ESLint and Prettier extensions for VSCode.
Install the ESLint and Prettier libraries into our project.
In your project’s root directory, you will want to run:.
Install the Airbnb config.
If you’re using npm 5+, you can run this shortcut to install the config and all of its dependencies:.
Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type).
Create .eslintrc.json file in your project’s root directory:.
Create .prettierrc file in your project’s root directory.


  • This will be where you configure your formatting settings.
  • I have added a few of my own preferences below, but I urge you to read more about the Prettier config file.
  • The last step is to make sure Prettier formats on save.
  • Insert "editor.formatOnSave": true into your User Settings in VSCode.
  • [1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a.
238238 bronze badges. 12.5k1212 gold badges5858 silver badges9696 bronze badges.
5858 silver badges9696 bronze badges.

3. 加入 Git 版本管理

1. 使用VueCLI创建项目

  • Currently, I don't think Vetur works with SFC (single file components) to provide typed completion for props.
  • This is why we're using JSX + Typescript + Vue + Eslint + AirBnB at work.
  • (I messaged you in Vue's #tooling Discord channel as well).
  • 22 gold badges1212 silver badges4141 bronze badges.
  • 4141 bronze badges.
  • just nothing or to print “Hello World” in you First Web Browser!
  • these are the files contained in the initial project structure:.
  • NPM (Node Package Manager) is used to install packages.
  • You can use it to install Vue within either a new or existing project.
  • You will need to ensure you have Node.js installed along with access to NPM.
  • To check, open up your console and type:.
  • Both of these commands should provide you with version numbers.
  • If they go unrecognized, visit Nodejs.org and download the appropriate installer based on your operating system.
  • Install it through the default options and reload your console.
  • You can now re-issue the same commands and they will work.
  • First, we have to create a new project folder:.
  • In order to save our project dependencies based on what we install with NPM, we need to create a package.json file.

Prettier and Standard in VS Code (optional)

  • vue axios请求接口,status显示为canceled

    微凉IML: 这也不是a标签啊

  • vue axios请求接口,status显示为canceled

    qq_27039987: 什么玩意

  • SQL语言——DDL (Data Definition language) 数据库定义语言

    Lansonli: 干货满满,很详细,感谢分享~

  • SQL语言——DDL (Data Definition language) 数据库定义语言

    、Dong: 之前有看你的一篇文章,写的很好, 期待您的回复与关注!

  • input获取焦点不生效问题

    努力学前端的南宫: 感谢,问题解决了。我之前在用vue给input设置聚焦,结果发现实际上并没有,但是放到settimeout就可以了


  • To do that, issue the following command:.
  • This will create a new package.json file and enter the defaults -y for the prompts.
  • Next, we will use npm to install vue:.
  • At this point, you could create an index.html file with the same exact contents as the CDN example above, except change the