前端 vue 环境搭建

目标

vue 代码中 template、script 代码按照 eslint 规范提示报错，style 部分由 stylelint 提示报错
格式化时自动修复（默认按键 shift+alt+f）
支持提交代码时进行校验，如果有报错不能通过提交

安装 vscode 插件

vetur（vue 代码格式化）
eslint（js 代码检查）
prettier（代码格式化）
stylelint（css/less/scss 校验）

eslint 和 prettier 有重叠部分，eslint 更侧重于代码质量，prettier 更侧重与代码格式

vscode 工作空间设置

文件->首选项->设置->工作区设置->点击右上角的花括号图标,覆盖设置

{
   "vetur.format.defaultFormatter.html": "none",
    "vetur.format.defaultFormatter.css": "none",
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.less": "none",
    "vetur.format.defaultFormatter.postcss": "none",
    "vetur.format.defaultFormatter.scss": "none",
    "vetur.format.defaultFormatter.stylus": "none",
    "vetur.format.defaultFormatter.ts": "none",
    "vetur.validation.template": false,
    "vetur.validation.style": false,
    "eslint.autoFixOnSave": true, // 取消保存时自动修复
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "scss.validate": false,
    "prettier.disableLanguages": [],
    "prettier.eslintIntegration": true,
    "prettier.printWidth": 120,
    "prettier.singleQuote": true,
    "prettier.semi": false
}

Tips: 格式化按键默认是shift+alt+f,如果格式化不能自动修复错误，查看一下是否按键被占用。文件>首选项>键盘快捷方式>搜索 shift alt f,删除格式化文档之外的按键绑定

创建项目

vue create projectname
选择 Manually select features
用空格勾选 Babel、CSS Pre-processors、Linter/Formatter,回车
Sass/SCSS
ESLint with error prevention only
Lint on save
In dedicated config files
选择是否以此配置当作以后的默认设置，选 N
tips: 需要 vue-cli3,编写此文档时 vue-cli 版本 3.3.0

安装 npm 依赖包

npm install --save-dev eslint eslint-config-prettier eslint-config-standard eslint-plugin-vue eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard husky lint-staged prettier stylelint stylelint-config-recommended-scss stylelint-scss

安装完毕后，package.json 文件应该如下所示

如果安装后不能正常进行格式化和校验，请对应此package.json查看是否缺少包或者包版本过低导致

{
  "name": "lint",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --no-fix",
    "lint:fix": "vue-cli-service lint"
  },
  "gitHooks": {
    // @vue/cli-service自动安装yorkie(fork自husky)
    "pre-commit": "lint-staged" // 配置提交前校验
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{html,vue,css,sass,scss}": "stylelint"
  },
  "dependencies": {
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.12.0",
    "eslint-config-prettier": "^3.5.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0-beta.6",
    "lint-staged": "^8.1.0",
    "node-sass": "^4.9.0",
    "prettier": "^1.15.3",
    "sass-loader": "^7.0.1",
    "stylelint": "^9.10.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-scss": "^3.5.1",
    "vue-template-compiler": "^2.5.21"
  }
}

如果不是使用 vue-cli3 创建的项目需要额外在 package.json 中配置：

  "husky": {
  "hooks": {
  "pre-commit": "lint-staged"
  }
  },

并去掉package.json中的gitHooks

.eslintrc.js

项目根目录创建.eslintrc.js文件:

module.exports = {
  root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找
  extends: [
    "standard",
    "plugin:vue/recommended",
    "prettier",
    "prettier/standard",
    "prettier/vue"
  ],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // Vue: false
  },
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-*
  plugins: ["standard", "vue", "prettier"],
  // 这里填入你的项目需要的个性化配置
  rules: {
    "prettier/prettier": ["error", { semi: false, singleQuote: true,printWidth:120 }],
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "any"
        }
      }
    ],
    "vue/name-property-casing": "off",
    "vue/attribute-hyphenation": "off",
    "vue/require-prop-type-constructor":"off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-descending-specificity":"null"
  },
  // 此项是用来指定javaScript语言类型和风格
  parserOptions: {
    sourceType: "module", // sourceType用来指定js导入的方式，默认是script，如果代码是在ECMASCRIPT中的模块使用module
    ecmaFeatures: {
      jsx: true
    }
  },
  // 此项指定环境的全局变量，使用 env 关键字指定你想启用的环境，并设置它们为 true
  env: {
    es6: true,
    node: true
  }
};

.stylelintrc

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
      "no-descending-specificity":null
  }
}

命令行指令

npm run serve 在线运行
npm run build 打包命令
npm run lint 用 eslint 检查所有代码错误
npm run lint:fix 修复所有可 fix 的 eslint 错误

参考文章

你没看过的Vue项目代码检查+格式化教程
 使用ESLint ＆ Prettier美化Vue代码
 使用ESLint+Prettier来统一前端代码风格

# 前端 vue 环境搭建

# 目标

# 安装 vscode 插件

# vscode 工作空间设置

# 创建项目

# 安装 npm 依赖包

# .eslintrc.js

# .stylelintrc

# 命令行指令

# 参考文章