web mode indent not correct when line too long.
the code:
<script>
import axios from 'axios'
export default {
components: {
},
asyncData ({ params }) {
return axios
.get().then((res) => {
return { title: res.data.title }
})
}
}
</script>
The following is correct.
return axios
.get().then((res) => {
return { title: res.data.title }
})
but:
return axios.get()
.then((res) => {
return { title: res.data.title }
})
when i break line behind "axios", it's not correct
anybody help??
Ah... I found it.
(add-to-list 'web-mode-indentation-params '("lineup-calls" . nil))
Related
I'm working on a vscode extension using the HoverProvider to supply some HTML links for the MarkdownString, the links themselves are my own commands that work fine (they are being registered and their function hits). Unfortunately I'm unable to pass any querystring values/arguments into the command function.
Is it possible to pass args via the MarkdownString so that the command function receives them?
package.json
{
"name": "hover-command",
.. snip snip ...
"contributes": {
"commands": [
{
"command": "hover-command.say_hello",
"title": "greetz"
}
]
},
In the extension.ts file
context.subscriptions.push(
vscode.commands.registerCommand("say_hello", async (hi: string) => {
vscode.window.showInformationMessage(hi + ' greetz at ' + new Date());
})
);
and
const selector: vscode.DocumentSelector = {
scheme: "file",
language: "*",
};
vscode.languages.registerHoverProvider(selector, {
provideHover(
doc: vscode.TextDocument,
pos: vscode.Position,
token: vscode.CancellationToken
): vscode.ProviderResult<vscode.Hover> {
return new Promise<vscode.Hover>((resolve, reject) => {
const hoverMarkup = "[Greetings...](command:say_hello?hi=world)";
if (hoverMarkup) {
const mdstring = new vscode.MarkdownString(hoverMarkup);
mdstring.isTrusted = true; // NOTE: this is needed to execute commands!!
resolve(new vscode.Hover(mdstring));
} else {
reject();
}
}
);
},
});
but the registered command vscode.window.showInformationMessage is not getting any arguments/query string values. I have tried looking at arguments but still at a loss.
A few examples from the VSC source code
[search the Marketplace](command:workbench.extensions.search?%22%40category%3A%5C%22scm%20providers%5C%22%22)
[Initialize Repository](command:git.init?%5Btrue%5D)
[configure](command:workbench.action.openSettings?%5B%22editor.formatOnSave%22%5D)
Thanks again #rioV8, after a few failed attempts there are a few steps to get command hover markdown links to work with arguments.
I'm using TypeScript, so I'll add an interface to define the shape of the args
interface ISayHelloArgs {
msg: string;
}
The registered command then uses this interface (you get a single object 'args')
context.subscriptions.push(
vscode.commands.registerCommand("say_hello", async (args: ISayHelloArgs) => {
vscode.window.showInformationMessage(args.msg + ' greetz at ' + new Date());
})
);
The registered HoverProvider then build the args using encodeURI version of a JSON string.
vscode.languages.registerHoverProvider(selector, {
provideHover(
doc: vscode.TextDocument,
pos: vscode.Position,
token: vscode.CancellationToken
): vscode.ProviderResult<vscode.Hover> {
return new Promise<vscode.Hover>((resolve, reject) => {
const args: ISayHelloArgs = { msg: 'hello' };
const jsonArgs = JSON.stringify(args);
const hoverMarkup = `[Greetings...](command:say_hello?${encodeURI(jsonArgs)})`;
if (hoverMarkup) {
const mdstring = new vscode.MarkdownString(hoverMarkup);
mdstring.isTrusted = true; // NOTE: this is needed to execute commands!!
resolve(new vscode.Hover(mdstring));
} else {
reject();
}
}
);
},
});
This worked for me, hope it helps others.
I've one question. I don't understand why, but my services is undefined. Someone could help me to clarify this ?
I've a component "FormLogin" with the call of this service
<script>
import { authenticationService } from '#/container.js'
import { ref } from '#vue/reactivity'
export default {
emits: ['successfullyLogged'],
setup (props, context) {
const errors = ref([])
const email = ref(null)
const password = ref(null)
const submit = () => {
errors.value = []
authenticationService()
.login(email.value, password.value)
.then(() => {
context.emit('successfullyLogged')
})
.catch(error => {
errors.value = [error.response.data.message]
})
}
return {
email,
password,
errors,
submit
}
}
}
</script>
Then i've the "global injection"
import api from '#/clients/api.js'
import TokenRepository from '#/repositories/TokenRepository.js'
import AuthenticationService from '#/services/AuthenticationService.js'
export function tokenRepository () {
return new TokenRepository()
}
export function authenticationService () {
return new AuthenticationService(api, tokenRepository)
}
And after that, the service itself
import store from "#/store"
export default (client, tokenRepository) => {
const login = (email, password) => {
return client.post('/oauth/token', {
grant_type: 'password',
client_id: process.env.VUE_APP_CLIENT_ID,
client_secret: process.env.VUE_APP_CLIENT_SECRET,
username: email,
password: password
})
.then(response => {
tokenRepository().store(response.data.access_token)
store.dispatch('account/loadUser')
})
}
const logout = () => {
tokenRepository().destroy()
store.commit('account/setUser', {})
}
return {
login,
logout
}
}
But when i run this code, fill my form fields and hit the button "submit", i've this error in console, and i don't undestand why. (And when i try to use the debugger, it appear that authenticationService in FormLogin is undefined.
Thanks in advance for your help,
Christophe
So the answer of the problem was to remove the word "new" in my container.js
Bad answer for me
export function authenticationService () {
return new AuthenticationService(api, tokenRepository)
}
Good answer for me
export function authenticationService () {
return AuthenticationService(api, tokenRepository)
}
Hi so I have a view where I have a button , When it's clicked I want a value to be saved in the db . What I get now is nothing like I click on button but nothing happens .
Here's the code I have :
<a-button type="primary" class="mb-4 text-center mr-1 float-right" #click="onSubmit">Confirm</a-button>
in my script I have:
setup(){
const onSubmit = () => {
axios.post("/insertstatut/"+876,"added").then((res)=>{
message.success(`statut ajouté`)
router.push({
path:'/cand',
}).catch(error => {
console.log('error', error);
})
} ,
)
}
}
Please if u have any idea what I should do , do share thank you.
you are using composition api feature setup in your vue code,
you need to return the methods or properties u wish to use in in your template.
setup () {
return {
onSubmit: () => {}, //some method u want to use later in template ,
show: false, // or some property
}
}
this is how your component should look
<template>
<a-button
type="primary"
class="mb-4
text-center
mr-1float-right"
#click="onSubmit"
>
Confirm
</a-button>
</template>
<script>
import AButton from './button-path/AButton.vue'
import axios from 'axios'
export default {
componets: { AButton },
setup() {
const onSubmit = () => {
axios.post('/insertstatut/' + 876, 'added').then((res) => {
message.success(`statut ajouté`)
router
.push({
path: '/cand',
})
.catch((error) => {
console.log('error', error)
})
})
}
// Expose your constants/methods/functions
return {
onSubmit,
}
},
}
</script>
I'm trying to authenticate my user when the page is loading. So I have the following code :
actions: {
nuxtServerInit ({dispatch, commit, app}, context) {
return new Promise((resolve, reject) => {
const cookies = cparse.parse(context.req.headers.cookie || '')
if (cookies.hasOwnProperty('x-access-token')) {
app.$axios.setToken(cookies['x-access-token'], 'Bearer')
api.auth.me2()
.then(result => {
commit('setUser', result.data.user)
resolve(true)
})
.catch(error => {
commit('resetUser')
resetAuthToken()
resolve(false)
})
} else {
resetAuthToken()
resolve(false)
}
})
}
However I have the following error :
Cannot read $axios property of undefined. What is wrong with my code ?
App should come from context e.g. from second argument.
So your code should be
context.app.$axios.setToken(cookies['x-access-token'], 'Bearer')
Another way. You could pass app in the second argument such that
nuxtServerInit ({dispatch, commit}, {app}) {
The complete code:
actions: {
nuxtServerInit ({dispatch, commit}, {app}) {
return new Promise((resolve, reject) => {
const cookies = cparse.parse(context.req.headers.cookie || '')
if (cookies.hasOwnProperty('x-access-token')) {
app.$axios.setToken(cookies['x-access-token'], 'Bearer')
api.auth.me2()
.then(result => {
commit('setUser', result.data.user)
resolve(true)
})
.catch(error => {
commit('resetUser')
resetAuthToken()
resolve(false)
})
} else {
resetAuthToken()
resolve(false)
}
})
}
}
Let's say I have following action:
export function signIn(data) {
return {
type: USER_SIGN_IN,
promise: api.post('/sign_in', data)
}
}
and following middleware:
export default function promiseMiddleware() {
return next => action => {
const { promise, type, ...rest } = action
if (!promise) {
return next(action)
}
const SUCCESS = `${type}_SUCCESS`
const REQUEST = `${type}_REQUEST`
const ERROR = `${type}_ERROR`
next({ type: REQUEST, ...rest })
return promise
.then(res => {
next({ response: res.data, type: SUCCESS, ...rest })
return true
})
.catch(error => {
...
})
}
}
This code is loosely based on https://github.com/reactGo/reactGo/
But what if in then callback after calling next I want to make a redirect to another path?
I did following. I passed redirect url through action:
export function signIn(data) {
return {
type: USER_SIGN_IN,
promise: api.post('/sign_in', data),
redirect: '/'
}
}
and added another call of next method with push from react-router-redux.
import { push } from 'react-router-redux'
export default function promiseMiddleware() {
return next => action => {
const { promise, type, redirect, ...rest } = action
...
return promise
.then(res => {
next({ response: res.data, type: SUCCESS, ...rest })
next(push(redirect))
return true
})
.catch(error => {
...
})
}
}
It seems like it works, but I'm not sure if this is a good idea or if there are some pitfalls of multiple next calls and I shouldn't do like this?
Maybe there are some better approaches for implementing such redirects?