vue cli3 创建typescript项目

一、创建项目（基于cli3+)

--若cli版本不对，请卸载后重新安装

命令行:vue create 

安装的自定义选项，查看下图

二、安装后，配置项目的eslint+prettier

1、配置.prettierrc.js

 代码检查工具选择了Eslint+Prettier时，ESlint与Prettier相冲突的配置项会被关闭，采用的是Prettier的配置项。固如果想保留ESlint中的配置项，要单独配置prettier文件。

在项目根目录下创建一个`.prettierrc.js`文件，并加上以下配置（具体自定义，可以参照文档）

module.exports = {
    singleQuote: true,
    semi: false,
  //"printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  //"tabWidth": 2, //一个tab代表几个空格数，默认为80
  //"useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  //"singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  //"semi": true, //行位是否使用分号，默认为true
  //"trailingComma": "none", //是否使用尾逗号，有三个可选值""
  //"bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  //"parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

然后修改.eslintrc.js,加上代码： "prettier/prettier":"error"

三、配置保存代码，自动按照eslint规范格式化代码配置（配置vue.config.js)

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .loader('eslint-loader')
      .tap(options => {
        options.fix = true
        return options
      })
  }
}

备注：

下载eslint npm i -g eslint           下载prettier  npm i -g prettier 

eslint 核心参数配置中文版：http://eslint.cn/docs/user-guide/command-line-interface

最核心的eslint规则配置（js的语法规则）：http://eslint.cn/docs/rules/

网友分享：https://www.jianshu.com/p/bfc7e7329cff