Vue项目构建+Eslint自动格式化

Vue项目构建+Eslint自动格式化

1.安装 vue/cli

npm install -g @vue/cli

2.创建项目

选择 manually select features(自定义配置)

#创建项目
vue create 项目名

3.配置组件

勾选Router、Vuex、Linter/Formatter

4.选择vue版本

因为本项目需要兼容IE11，IE11不支持vue3语法，所以我选择2.x

5.是否启用History模式

输入Y

6.格式化工具和配置

选择ESLint+Prettier

7.选择保存时格式化

Lint on save

8.选择配置存放位置

In dedicated config files(保存在专用配置文件中)

9.是否将当前配置应用到以后项目

输入y，并输入配置名

10.修改settings.json

增加如下代码

 // 窗口失去焦点自动保存
  "files.autoSave": "onFocusChange",
  // 编辑粘贴自动格式化
  "editor.formatOnPaste": true,

  // eslint设置
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "vue",
  ],

  //新版本保存自动eslint修复格式
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }

settings.json完整配置

至此vue项目就创建完成了，当修改代码保存时会自动进行格式化