vue+eslint+prettier+vetur 使用vscode 前端工程化

vscode 需要安装 vetur , prettier, eslint ,stylelint 插件

vue项目工程安装以下插件

　　cnpm i eslint-plugin-prettier -S -D

　　cnpm i  eslint-config-prettier  -S -D

　　cnpm i  prettier -S -D

　　cnpm i stylelint stylelint-config-standard -S -D 

　　cnpm install  stylelint-order stylelint-config-rational-order -S -D

　　cnpm install  stylelint-config-prettier -S -D

　　cnpm i stylelint-declaration-block-no-ignored-properties -S -D

　　cnpm i stylelint-scss -S -D

package.json 最终含一下插件

全部配置:package.json

//
{
  "name": "eslintdemo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "fix": "eslint --fix --quiet --cache --ext .js,.vue src/"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "prettier": "^2.2.1",
    "stylelint": "^13.8.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.18.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.8.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.18.0",
    "vue-template-compiler": "^2.6.11"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "npm run fix",
      "git add"
    ]
  }
}

根目录新增文件  .stylelintrc.js

module.exports = {
  ignoreFiles:[],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-scss','stylelint-order','stylelint-declaration-block-no-ignored-properties'],
  rules: {
    'no-empty-source':null,
    'plugin/declaration-block-no-ignored-properties':true,
    'indentation':'tab',
    'rule-empty-line-before':'never',
    'no-descending-specificity':null,
    'selector-combinator-space-after':'always'
  }
}

更目录新增文件  .prettierrc.js

module.exports = {
  'printWidth': 140, //一行的字符数，如果超过会进行换行，默认为140
  'tabWidth': 2, //一个tab代表几个空格数，默认为80
  'useTabs': true, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  'singleQuote': true, //字符串是否使用单引号，默认为false，使用双引号
  'semi': true, //在语句末尾打印分号，默认为true
  'trailingComma': "none", //是否使用尾逗号，有三个可选值"<none|es5|all>" all效果{name:"asd",}
  'bracketSpacing': true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  /*
   * jSXBrackets html标签结束符号>是否换行 默认false
   * false换行效果:<button
   *                  id="prettier-id"
   *                  onClick={this.handleClick}
   *               >
   *
   * true 不换行效果:<button
   *                  id="prettier-id"
   *                  onClick={this.handleClick}>
   *
   *  */
  'jSXBrackets':true,
  /**
   * arrowParens  箭头函数参数是否使用() 默认avoid
   * always 使用 效果: (x) => x
   * avoid  不适用 效果: x => x
   */
  'arrowParens': 'always',
  /**
   * endOfLine 行结束
   * "lf"–仅
换行（），在Linux和macOS以及git repos内部通用
   * "crlf"-回车符+换行符（
），在Windows上很常见
   * "cr"-仅回车符（
），很少使用
   * "auto" -维持现有的行尾（通过查看第一行后的内容对一个文件中的混合值进行归一化）
   */
  'endOfLine':'lf'
};

修改  .editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space  #缩进方式tab/space
indent_size = 2       #缩进大小
end_of_line = lf      #行结束 仅
换行（），在Linux和macOS以及git repos内部通用
trim_trailing_whitespace = true #删除尾部空格
insert_final_newline = true #末尾是否添加新的一行
max_line_length = 140  #每行最大长度换行长度

修改  .eslintrc.js

module.exports = {
  root: true,
  env: { //使用的环境node环境,浏览器 如果不配置在使用全局变量时会报错如:js全局对象window,node中process对象
    node: true,
    browser:true,
    es6:true
  },
  extends: ['plugin:vue/essential', '@vue/airbnb','plugin:prettier/recommended'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

新建.vscode文件夹  里面新建  setting.json

{
  "eslint.validate":["javascript", "vue"],
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "javasccript.format.enable":false,
  "vetur.completion.autoImport":true,
  "vetur.experimental.templateInterpolationService":true,
  "vetur.format.enable":false,
  "css.validate":false,
  "scss.validate":false,
  "less.validate":false
}