美文网首页
Vue CLI 创建 ES6 项目

Vue CLI 创建 ES6 项目

作者: _于曼丽_ | 来源:发表于2023-10-23 19:48 被阅读0次

使用 ESLint 来检测语法和代码规范

  1. 创建项目,选择手动配置,选择 ESLint + Standard config,选择 Lint on save
vue create learn-vue

? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, 
<i> to invert selection, and <enter> to proceed)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x 

? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
 selection, and <enter> to proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

? Save this as a preset for future projects? (y/N) N
  1. 进入项目目录,打开 VSCode
cd learn-vue
code .
  1. 修改 VSCode 工作区配置文件,设置保存文件的时候自动使用 eslint 来检测语法与代码规范
{
    // 千万不要加这一句,否则保存文件的时候会启动 format 来检测代码规范,会与 eslint 的 Standard 规则冲突
    // "editor.formatOnSave": true,

    // 保存文件的时候自动使用 eslint 来检测语法与代码规范
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

至此,在 VSCode 中保存位于项目目录中的 js 文件或 .vue 文件的时候,会自动使用 eslint 来检测语法与代码规范,代码规范必须符合 Standard 规范。

使用 ESLint 来检测语法,使用 Prettier 来检测代码规范

  1. 创建项目,选择手动配置,选择 ESLint with error prevention only,选择 Lint on save
vue create learn-vue

? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, 
<i> to invert selection, and <enter> to proceed)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x 

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
 selection, and <enter> to proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

? Save this as a preset for future projects? (y/N) N
  1. 进入项目目录,安装 eslint-config-prettier,打开 VSCode
cd learn-vue
npm i -D eslint-config-prettier
code .
  1. 修改 .eslintrc.js 文件,手动加上 extends: 'prettier'
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
    'prettier'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
  1. 手动创建 Prettier 配置文件 .prettierrc.js
module.exports = {
    // 是否使用尾逗号
    trailingComma: 'none',
    // 按 Tab 键的时候的缩进方式,true 使用 tab 缩进,false 将 tab 转换为空格缩进
    useTabs: false,
    // useTabs: false 的时候,使用空格缩进缩进几个空格
    tabWidth: 4,
    // 语句结尾是否加分号
    semi: true,
    // 字符串是否使用单引号
    singleQuote: true
}
  1. 修改 VSCode 工作区配置文件
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

至此,在 VSCode 中保存位于项目目录中的 js 文件或 .vue 文件的时候,会自动使用 eslint 来检测语法,使用 Prettier 来格式化代码规范。

相关文章

  • Vue-cli 2.x使用

    Vue-cli 1 . Vue-cli安装 2 .创建项目 vue init 创建...

  • vue-cli-service关于 output路径设置+服务端

    用vue cli创建一个项目 Inside a Vue CLI project, @vue/cli-service...

  • vue-cli3 搭建项目

    一、创建项目 通过‘vue create 项目名称’创建,如果你没有安装vue-cli3或者安装的vue-cli版...

  • vue-学习笔记

    关于vue cli 全局安装vue cli命令:npm install -g @vue/cli 创建新项目命令:v...

  • vue入门教程

    Vue-cli入门教程 vue-cli是官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目 ...

  • vue实战第一天

    Vue技术栈开发实战-使用vue-cli3创建项目使用Vue UI创建、管理项目 这里的vue-cli必须是3.x...

  • vue3.0终端命令行

    #检查node环境 安装nrm 卸载vue-cli 安装 vue-cli 创建项目 运行项目

  • 10. 基于Vue+Element+nodeJs+Express

    一、创建vue单页面项目 我这里创建vue项目使用的是Vue-CLI脚手架,Vue CLI 是一个基于 Vue.j...

  • vue项目开发流程

    创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手...

  • 创建vue项目流程

    创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手...

网友评论

      本文标题:Vue CLI 创建 ES6 项目

      本文链接:https://www.haomeiwen.com/subject/jzsjidtx.html