#搭建Vue+TypeScript项目(六)

突然发现tslint不维护了,心情忧伤,使用eslint

创建项目初始配置

1.创建项目时,第四步

4、Linter / Formatter 代码风格、格式校验，使用ESLint + Prettier,和vscode的Prettier插件配合,格式化代码
  TSLint
  仅错误预防
  ESLint with error prevention only
  Airbnb配置
  ESLint + Airbnb config
  标准配置
  ESLint + Standard config
  Prettier配置（常用）
  ESLint + Prettier

2.安装一个插件,反正提示要安装

npm i eslint-plugin-html -D

3.在根目录下新建.prettierrc文件,配置一些你的规则,意思是
我的文件里面的内容

{
    "useTabs": true,
    "tabWidth": 2,
    "arrowParens": "always",
    "trailingComma": "es5",
    "singleQuote": true
}

4.因为我使用的是typescript，所以还要配置setting.json里面的配置,增加typescript识别

"eslint.validate": [
    "typescript",
    "javascript",
    "javascriptreact",
    "html",
    "vue",

5.如果想要编译报错提示配置vue.config.js

module.exports = {
  lintOnSave: "error",
}

创建项目时用错了,用了tslint,弥补方式

1.卸载插件

npm un tslint-config-prettier tslint-plugin-prettier -D

2.删除tslint.json

3.新建个项目,将.eslintrc.js文件复制到根目录文件夹下
安装eslint插件

// 依次作用 支持编译报错 支持ts 支持插件prettier
npm i @vue/cli-plugin-eslint @vue/eslint-config-typescript @vue/eslint-config-prettier -D
// 就是"plugin:vue/essential"
npm i eslint eslint-plugin-html eslint-plugin-prettier eslint-plugin-vue -D

4.配置vue.config.js

module.exports = {
  lintOnSave: "error",
}

5.在根目录下新建.prettierrc文件,配置一些你的规则,意思是
我的文件里面的内容

{
    "useTabs": true,
    "tabWidth": 2,
    "arrowParens": "always",
    "trailingComma": "es5",
    "singleQuote": true
}

6.因为我使用的是typescript，所以还要配置setting.json里面的配置,增加typescript识别

"eslint.validate": [
    "typescript",
    "javascript",
    "javascriptreact",
    "html",
    "vue",

7.如果自己配置了格式化的规则,想全局应用,运行命令

npm run lint

如果没有命令就创建一个

"lint": "vue-cli-service lint"

一些理解

prettier是一个第三方库,vscode集成了插件,可以格式化代码,.prettierrc文件就是格式化代码一些规则.可以去官网配置规则
prettier
vscode的setting.json里面的配置是默认配置,如果.prettier没有设置,就是用setting.json里面的设置

eslint是校验代码工具,需要配置规则,在.eslintrc.js里面配置rule,去除掉不想要的规则.