如何快速搭建一个vue-cli(有ESlint)项目一、项目初始化阶段 1.创建vue-cli 1.1创建脚手架 1.1

一、项目初始化阶段

1.创建vue-cli

1.1创建脚手架

1.1.1如果一开始没有安装脚手架的话需要自己安装脚手架

//全局安装时yarn 需要将global写在add前 
yarn : yarn global add vue/cli
npm: npm install --global @vue/cli
//安装完成后查看是否有vue/cli
//使用命令： vue -V 可以查看当前vue/cli版本，有就安装成功，否则未安装成功

1.1.2创建项目

//在要创建项目的位置打开终端 使用命令vue create 项目名称
vue create demo

//此时会出现

//Manually select features 是手动配置,当然要是不会手动配置的话可以选择 Default中的两个,第一个是在vue2版本开发，第二个是在vue3版本开发，下面我们来手动配置一下脚手架

//一般我们会选择带*好的这几项
//Choose Vue version (选择vue版本)
//Babel (我们可以在后面选项中选择将生成的babel. config.js 在外部生成)
//Router (路由)
//Vuex (数据管理仓库，实现数据共享)
//CSS pre-processors (CSS 的预处理)
//Linter/Formatter (安装ESlint 规范包)

//我们根据自己的需要选择

//安装成功后显示这个界面 我们 cd demo 进入我们创建的demo 项目中，这样我们就初始化了一个vue脚手架，之后的axios、vant、element 等组件 使用yarn 或则 npm 就可以下载

2.关于ESlint的配置

2.1 关于ESlint 的相关内容

ESlint：是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
我的理解：由于每一位程序员写代码时千姿百态，我们想大家在一个规定的规范下书写代码，这样当你去接手别人的项目的时候会方便很多。

2.2ESlint在vue/cli中的使用

2.2.1ESlint 包和ESlint 插件
- 在我们的VScode 中，我们会安装ESlint插
- ESlint插件怎么用呢？
  - 首先我们来看一下它的设置

+ 翻译：将ESLint集成到VS Code中。如果你是ESLint新手，请检查文档。

  扩展使用安装在打开的工作空间文件夹中的ESLint库。 
  如果文件夹不提供一个扩展寻找全局安装版本。 
  如果你没有在本地或全局安装ESLint，
  可以通过在工作空间文件夹中运行npm install ESLint来安装本地安装，
  或者运行npm install -g ESLint来安装全局安装。 

  在新的文件夹中，你可能还需要创建一个.eslintrc配置文件。 
  你可以使用VS Code命令创建ESLint配置，或者在终端中运行ESLint命令。 
  如果你已经全局安装了ESLint(见上文)，那么在终端中运行ESLint——init。
  如果你已经在本地安装了ESLint，那么在Windows下运行。
  \node_modules\.bin\ ESLint——init，在Linux和Mac下运
  行。/node_modules/.bin/ ESLint——init。

ESlint插件，我们怎么才能使它在我们保存代码的时候让他自动将我们的代码转化成我们安装的ESlint里面的规范包呢？
- 我们往下翻看到这段，意思我们可以设置 source.fixAll.eslint ，这样我们就可以实现上面的需求

配置

//配置内容 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } ```

设置完成，此时我们就可以在JS中写代码，保存的时候会按照我们ESlint的依赖包里面的规范来修改，不用我们输入命令就可以更改了

2.2.2安装vetur插件
- 注意：此时我们的ESlint插件的设置此时只能检查并修改JS代码，但是我们使用以.vue的文件时并不能检查，此时我们需要安装一个插件

2.2.3Vetur中使用的规范是prettier来校验的

方法一：最简单，也是最推荐的就是将检查JS这里的prettiers修改为none,让其不要管我们的js（推荐）

方法二：我们需要通过修改prettier的规范来符合我们安装的ESlint依赖包里面的规范，在我们项目的根目录中创建.prettierrc.js

// .prettierrc.js

module.exports = {
  // 最大长度80个字符
  printWidth: 80,
  // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行末分号, 默认true
  semi: false,
  // JSX双引号
  // jsxSingleQuote: false,
  // 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  //在对象或数组最后一个元素后面是否加逗号（很重要）
  trailingComma: 'es6',
  // 在对象文字中打印括号之间的空格。 默认true
  bracketSpacing: true,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'always',
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 行尾换行格式
  endOfLine: 'auto',
  // html空格敏感度
  htmlWhitespaceSensitivity: 'ignore',
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 使用tab缩进还是空格，默认false
  useTabs: false,
  // vue缩进脚本和样式
  vueIndentScriptAndStyle: false,
  // > 标签放在最后一行的末尾，而不是单独放在下一行 默认false
// jsxBracketSameLine: true,
}

//创建完成后，就可以实现让 ESlint插件->通过Vetur插件来修改我们创建的 .vue文件了 ```

到此我们就将关于在VScode中使用ESlint 的运用就结束了，大家可以开始尝试一下创建一个项目试试是否可以运行，配置完成后需要重新运行VScode

2.3 关掉ESlint 规范

直接在根目录下配置 vue.config.js文件

module.exports={
    lintOnSave:false
}

2.4 配置文件(.eslintrc.js)

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    indent: 'off',
    // 设置 函数名与括号之间 不用空格
    // 'space-before-function-paren': ['error', 'never']
    // anonymous用于匿名函数表达式（例如function () {}）。
    // named用于命名函数表达式（例如function foo () {}）。
    // asyncArrow用于异步箭头函数表达式（例如async () => {}）。
    'space-before-function-paren': ['error', {
      anonymous: 'always',
      named: 'never',
      asyncArrow: 'always'
    }]
  }
}

当我们在使用的过程中每个项目的SElint 校验方式不一样，当我们开发的时候需要和小组的人一起配置一个一样的配置文件，确保每个人在保存代码的时候达成一致，方便开发