使用eslint+prettier

   养成一个良好的编码习惯，也是一种乐趣

1.VSCODE安装插件ESLINT,PRETTIER-CODE FORMATEER

2.进入VSCODE配置（文件->首选项->配置），本地设置的格式如下

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true}, 
 "editor.formatOnSave": false,  
 "eslint.validate": [    
     "javascript",   
     "vue",    
     "html",   
     "typescript"  ],  
 "prettier.jsxBracketSameLine": true, 
 "prettier.semi": false,  
 "prettier.singleQuote": true,  
 "prettier.jsxSingleQuote": true

也可以在工作区编辑，这样会生成一份配置在.vscode/setting.json文件中，适用于团队共享

3.测试Vue项目，从CLI 4.5创建时，选择ESLINT +PRETTIER风格，查看package.json，安装了以下相关的插件

 "@vue/cli-plugin-eslint": "~4.5.0", 
 "@vue/eslint-config-prettier": "^6.0.0", 
 "babel-eslint": "^10.1.0",    
 "eslint": "^6.7.2", 
 "eslint-plugin-prettier": "^3.1.3",
 "eslint-plugin-vue": "^6.2.2",    
 "prettier": "^1.19.1",

5..eslintrc.js增加相关支持，例如冲突处理等，默认文件如下，可以在rules内增加其他约定

module.exports = { 
 root: true, 
 env: {    node: true  }, 
 extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], 
 parserOptions: {    parser: 'babel-eslint'  },  
 rules: {    
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',  
  'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'  
}}

6.项目下增加一个.prettierrc.js作为团队共享配置，比如

module.exports = {   
    semi: false,    
    singleQuote: true,  
    trailingComma: 'none', 
    printWidth: 300, // 超出300个字符再换行   
    endOfLine:'auto'
}

 7.此时在.js/.vue文件测试下比如代码行let a="1";会被eslint修复为let a=1，将lintOnSave在开发环境中开启，也有可能遇到失效

   一，检查eslint是否开启，如图

   二，.eslintignore是否误拦部分路径