前端工具中如果使用prettier进行代码格式化,eslint进行错误检测。对前端工作有极大的帮助
原则:
prettier和eslint配置可以分成两种,一种是本地配置,一种是全局配置。VScode会检测文件夹根目录下有没有用户自定义的配置文件 .prettierrc.json和.eslintrc.js。如果有则会优先加载用户自定义的配置,如果没有则会加载VScode中的setting.json配置文件内的配置。
现在vscode安装prettier和eslint的插件,装使用人数最多的就行。注意的是,这个只是插件哦,在本地使用npm安装prettier和eslint
.prettierrc.json文件配置:
{
"tabWidth": 2,
"vetur.format.defaultFormatter.html": "prettier",
"singleQuote": true,
"semi": false
}
.eslintrc.js文件配置:
module.exports = {
root: true,
parserOptions: {
ecmaVersion:6,
sourceType: 'module',
ecmaFeatures:{
jsx:true,
globalReturn:true,
impliedStrict:false,
experimentalObjectRestSpread: true//启用对对象的扩展
}
},
env:{
browser:true,
es6:true,
node:true,
commonjs:true,
jquery:true
},
// required to lint files
plugins: [
'html',
'react',
'promise'
],
// add your custom rules here
'rules': {
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
"quotes": [2, "single"], // 单引号
"no-console": 0, // 不禁用console
"no-debugger": 2, // 禁用debugger
"semi"